useEffect 中的 React 状态为空

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);
  })}, []);

每当我订阅推送器频道时，我都会收到当前订阅的用户并且状态设置正确。所有订阅的用户都在显示。但是，当一个新用户 joins/leaves 时，.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

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

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

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

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

useEffect 中的 React 状态为空

React state is empty inside useEffect

laravel

pusher

reactjs

laravel-echo