为啥反应钩子使用状态显示错误消息

Posted 2023-02-21

【中文标题】为啥反应钩子使用状态显示错误消息

【英文标题】：Why react hook usestate show an error message为什么反应钩子使用状态显示错误消息

【发布时间】：2021-11-10 11:19:34

【问题描述】：

我有一个 useState，但是当添加用户渲染时，React 显示错误。我不知道为什么 React 会显示错误。似乎是有效的代码

const [users, setUsers] = useState([]);

删除功能出错：

function App() 
    const [users, setUsers] = useState([]);

    const userAddHandler = input => 
        setUsers(prevState => 
            return [...prevState, input]
        )
    

    const deleteUserHandler = userId => 
        setUsers(userData => 
            userData.filter(user => 
                return userId !== user.id
            )
        );
    

    return (
        <div>
            <AddUser onAddUser=userAddHandler />
            <UserLists users=users onDelete=deleteUserHandler />
        </div>
    );


export default App;

这样的错误消息：

TypeError: userData is undefined
deleteUserHandler/<
src/App.js:17

  14 | 
  15 | const deleteUserHandler = userId => 
  16 |     setUsers(userData => 
> 17 |         userData.filter(user => 
  18 | ^            return userId !== user.id
  19 |         )
  20 |     );

当我返回它时，它会显示另一个错误消息：

Cannot update a component (`App`) while rendering a different component (`UserLists`). To locate the bad setState() call inside `UserLists`

我的用户列表是这样的：

const UserLists = (props) => 
    return (
        <ul>
            props.users.map((user) => 
                return (
                    <div
                        className=styles.userLists
                        key=user.id
                        onClick=props.onDelete(user.id)
                    >
                        <Card>
                            <li>`$user.username ($user.age Years Old)`</li>
                        </Card>
                    </div>
                );
            )
        </ul>
    );
;

export default UserLists;

【问题讨论】：

这个文件中prevState的值是多少？

你没有从你的setUser(userData => ...)返回任何东西，所以就像你已经完成了setUsers()

onClick=props.onDelete(user.id) 应该是onClick=() => props.onDelete(user.id)

【参考方案1】：

你没有返回任何东西所以它是undefined，需要returnfilter之后的数据。

const deleteUserHandler = userId => 
        setUsers(userData => 
            return userData.filter(user => 
                return userId !== user.id
            )
        );

【讨论】：

我有另一个错误Cannot update a component (App) while rendering a different component (UserLists). To locate the bad setState() call inside UserLists, follow the stack trace as described in 我像这样调用了 UserLists <div className=styles.userLists key=user.id onClick=props.onDelete(user.id) > <Card> <li>$user.username ($user.age 年老）</li> </Card> </div>

这里没有上下文，我猜是因为你在渲染后直接调用了onDelete，试试这个onClick=()=>props.onDelete(user.id)。如果它不起作用，请进行调查。

【参考方案2】：

const deleteUserHandler = userId => 
    const newData = userData.filter(user => userId !== user.id);
    setUsers(newData);

这也许是最好的办法。

【讨论】：

谢谢，它让我们的代码干净易读