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

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 强制为一个字符串，它会从对象/数组中删除任何有用的信息。相反，记录对象本身：

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

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

LIST:

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

LIST: [object Object]

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

{
    users: users,
}

服务器成功地返回了一个对象，并且您成功地将该对象存储在状态中。该代码正在运行，您自己的测试表明了这一点。

---

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

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

但是在useEffect 操作中，您将其设置为从服务器返回的对象：

setUsersList(users);

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

setUsersList(users.users);

或者，或者，只从服务器返回数组本身：

socket.emit(constants.ALL_USERS, users);