React Hook useState实现用户删除功能报错如何解决？

第一个报错：TypeError: userData is undefined #

原因：deleteUserHandler中调用setUsers时传入的回调函数没有返回值。你用大括号包裹了filter逻辑但没有添加return语句，导致回调返回undefined，React会将users状态直接更新为undefined。当下次调用deleteUserHandler时，setUsers回调拿到的最新状态userData就是undefined，调用filter方法自然抛出类型错误。

修复方式：给filter操作添加返回语句，或使用箭头函数隐式返回：

const deleteUserHandler = userId => {
    setUsers(userData => {
        // 新增return返回filter后的新数组
        return userData.filter(user => userId !== user.id)
    });
}
// 更简洁的隐式返回写法
// const deleteUserHandler = userId => setUsers(userData => userData.filter(user => userId !== user.id))

第二个报错：Cannot update a component (App) while rendering a different component (UserLists) #

原因：UserLists组件中给div绑定onClick事件时，直接执行了props.onDelete(user.id)，而不是将函数作为事件回调传递。这会导致UserLists渲染过程中就触发删除逻辑，调用App组件的setUsers更新状态，此时App还处于渲染流程中，触发React的渲染规则校验报错。

修复方式：将onClick的回调包裹为匿名箭头函数，仅在点击时才执行删除逻辑：

<div
    className={styles.userLists}
    key={user.id}
    // 用箭头函数包裹，避免渲染时直接执行
    onClick={() => props.onDelete(user.id)}
>

App组件 #

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

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

    const deleteUserHandler = userId => {
        setUsers(userData => userData.filter(user => userId !== user.id))
    }

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

export default App;

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;

内容的提问来源于stack exchange，提问作者Kofusu