Question

检查了所有相关问题，不幸的是找不到与我的问题类似的问题。

我有一组映射到表中的用户对象。每个用户ID的旁边都有一个删除按钮，当按下该按钮时，我会触发一个事件以将用户从阵列中删除。

我尝试向按钮添加第二个onClick函数，首先声明用户对象是什么，然后触发移除，我还尝试了e.stopPropagation（），以为它可能没有正确冒泡。

const UsersTable = ({ users, setUsers, callback }) => {
    const [selectedUser, setSelectedUser] = useState(null);
    const removeUser = user => {
        setSelectedUser(user)
        callback(user)
    };

    return (
        {
            users.map(user => 
                <div className="userRow">
                    <div className="deleteButton" onClick={()=> removeUser(user)}>
                        {user.name}
                    </div>
                </div>
            )
        }
    )
};

如果我使用已定义的用户运行回调，则它将正常运行。但是，在使用此功能时，第一次单击该按钮时，出现一个错误，提示用户不能为null，第二次按下时，它将正确触发。我做错了什么吗？为什么第一次按一下就不能正常工作。

Answer 1

我认为这可能是同步问题。与其在callback中运行removeUser，不如尝试将其放入useEffect中。 https://reactjs.org/docs/hooks-effect.html

在第二次按下按钮之前，事件无法正常触发

1 个答案: