Question

目前我正在构建一个带有 react 的推送聊天应用程序。我正在尝试保留在线用户列表。我在下面使用此代码：

const [users, setUsers] = useState([]);
useEffect(() => { // UseEffect so only called at first time render
window.Echo.join("server.0")
  .here((allUsers) => {
    let addUsers = [];
    allUsers.map((u) => {
      addUsers.push(u.name)
    })
    setUsers(addUsers);
  })
  .joining((user) => {
    console.log(`User ${user.name} joined`);
    setUsers([users, user]);
  })
  .leaving((user) => {
    console.log(`User ${user.name} left`);
    let addUsers = users;
    addUsers.filter((u) => {
      return u !== user.name;
    })
    setUsers(addUsers);
  })}, []);

每当我订阅推送频道时，我都会收到当前订阅的用户并且状态设置正确。所有订阅的用户都在显示。但是，当新用户加入/离开时，会调用 .joining/.leaving 方法，并且当我控制台登录时，用户状态为空。这样，用户状态将被设置为仅新添加的用户，而所有其他用户都将被忽略。我是新手，所以对此可能有一个简单的解释。我自己很难找到答案。我非常感谢您的帮助。

Answer 1

我在 joining 中看到了问题。您需要像这样更新 setState：setUsers([...users, user.name]);

而且 leaving 也需要更新：

const addUsers = users.filter((u) => {
  return u !== user.name;
});
setUsers(addUsers);

here 也应该重写：

let addUsers = allUsers.map((u) => u.name);
setUsers(addUsers);

Answer 2

我发现了这个问题。问题是当从回调函数中访问状态时，它总是返回初始值。在我的情况下是一个空数组。它在使用引用变量时确实有效。我添加了以下几行：

  const [users, _setUsers] = useState([]);
  const usersRef = React.useRef(users);
  const setUsers = data => {
   usersRef.current = data;
  _setUsers(data);
   }

每次更新用户状态时，我都会使用 setUsers 函数。现在，当我使用 usersRef.current 从回调函数内部访问状态时，我会获得最新状态。

我还使用了@Viet 的答案中的代码来正确更新值。

在 useEffect 中反应状态为空

2 个答案: