为什么在按钮的 onClick 中初始化的值未定义？

Question

我正在尝试为我的项目构建一个搜索栏。我有这部分代码显示可能的搜索结果，当您按下列表中的其中一个名称时，它会将其加载到一个变量上并调用 searchUser 函数。

{filteredData.length != 0 && (
                <div className="dataResult">
                {filteredData.slice(0, 10).map((user, key) => {
                    return (
                        <p className="dataItem" onClick={() => setSelectedUser(user), searchUser}>
                            {user.Username}
                        </p>
                    );
                })}
                </div>
            )}

下面是searchUser

function searchUser() {
        console.log(selectedUser);
        setUsername(selectedUser.Username);
        setWhomies(selectedUser.Whomies);
        setPoints(selectedUser.Points);
        setOpenPopup(true);
    };

如何将所选用户发送到必须向我显示其所有数据的功能？

Answer 1

setSelectedUser 将在下一次渲染中更新相关状态，但您正在尝试同步使用它。

解决此问题的两种方法：

运行状态变化时的一个效果：

useEffect(() => {
 setUsername(selectedUser.Username);
 setWhomies(selectedUser.Whomies);
 setPoints(selectedUser.Points);
 setOpenPopup(true);
}, [selectedUser])

<p className="dataItem" onClick={() => setSelectedUser(user)}>

将新用户作为参数传递给 searchUser:

function searchUser(user) {
 setUsername(user.Username);
 setWhomies(user.Whomies);
 setPoints(user.Points);
 setOpenPopup(true);
};

<p className="dataItem" onClick={() => {
  setSelectedUser(user)
  searchUser(user)
}}>...

Answer 2

如果您希望在 selectedUser 的值更新时触发搜索，您可以使用 useEffect 挂钩，因为尝试在点击事件上执行此操作可能无法正常工作，因为同步问题。

您可以按照以下方式进行操作：

useEffect(() => {
  searchUser();
}, [selectedUser]);

因此，您只需在点击事件上调用 setSelectedUser：

onClick={() => setSelectedUser(user)}

您可以查看 Effect Hook documentation 了解更多信息。

为什么在按钮的 onClick 中初始化的值未定义？

Why a value initialized in the onClick of a button result undefined?

searchbar

reactjs