为什么反应钩子使用状态显示错误消息答案

【问题标题】：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)}

标签： javascript reactjs react-hooks

【解决方案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);
}

这也许是最好的办法。

【讨论】：

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