如何将对象数组从服务器存储到客户端

Question

我们需要使用 ReactJS 将对象数组从服务器存储到客户端，但它不起作用。

所有这些都是为了在我的客户端显示用户连接，但我的用户列表状态没有保存任何东西。

备注：

我正在使用这些技术：

NodeJS（服务器）
ReactJS（客户端）
socket.io

客户代码

const [usersList, setUsersList] = useState([]);

  // get user connections data
  useEffect(() => {
    socket.on(ALL_USERS, ({ users }) => {
      console.log(users);
      setUsersList(users);
    });
  }, []);

  console.log("LIST: " + usersList);

服务器代码

 const users = getUsers(socket.id);
 socket.emit(constants.ALL_USERS, {
        users: users,
 });

Answer 1

首先，不要这样做：

console.log("LIST: " + usersList);

这会将 usersList 强制转换为字符串，从而从 objects/arrays 中删除任何有用的信息。相反，记录对象本身：

console.log("LIST: ", usersList);

除此之外...您从控制台截取的屏幕截图非常有说服力。首先，这是记录：

LIST:

这意味着 usersList 不包含任何内容。然后，在状态更新和组件重新渲染后，记录如下：

LIST: [object Object]

这意味着 usersList 现在包含一个对象。因此，尽管您断言它“不保存任何东西”，但您的调试输出清楚地表明它确实保存了一些东西。我怀疑它保存的正是服务器 returns:

{
    users: users,
}

服务器正在成功 returning 对象，并且您已成功将该对象存储在状态中。代码有效，您自己的测试表明。

您可能对数组和包含数组的对象之间的区别感到困惑。您最初将状态设置为空数组：

const [usersList, setUsersList] = useState([]);

但随后在 useEffect 操作中，您将其设置为从服务器 returned 的对象：

setUsersList(users);

也许您打算将其设置为该对象上的属性？:

setUsersList(users.users);

或者，仅 return 来自服务器的数组本身：

socket.emit(constants.ALL_USERS, users);

如何将对象数组从服务器存储到客户端

How to store an array of objects from server to client

javascript

arrays

node.js

socket.io

reactjs