Socket.io-反应：如何显示房间中连接的用户？

Question

我正在尝试映射连接到我的聊天应用程序的用户，并在div中呈现他们。

我将用户保存在一个对象数组中，并在用户在后端连接和断开与聊天室的连接时发送一个事件更新该数组，在前端获取该对象，将其保存在一个数组中，并使用map显示用户。

当我映射数组来显示用户时，我的页面只显示当前用户和后续用户，而不显示之前连接的用户。例如，如果我打开名为“布鲁斯”的应用程序和另一个用户为“安德鲁”的页面，第一个页面将同时显示用户和第二个仅显示“安德鲁”。如果我console.log从后端得到的数组，它会显示两个用户。如果我退出任何页面或重新加载它，它会显示“TypeError：无法读取未定义的属性‘用户名’”

后端

const users = []

    // Storing user
    const user = { id, username, room } 
    users.push(user)

const getUsersInRoom = (room) => {
    return users.filter((user) => user.room === room)
}

socket.on('join', ({ username, room }, callback) => {
    io.to(user.room).emit('roomData', {
      room: user.room,
      users: getUsersInRoom(user.room)
    })
    callback()
  })

  socket.on('disconnect', () => {
      io.to(user.room).emit('roomData', {
        room: user.room,
        users: getUsersInRoom(user.room)
      })
    }
  })

前端

    const [usersName, setUsersName] = useState([]);

    useEffect(() => {
        socket.on('roomData', ({room, users}) => {
            setUsersName(previousUsersName => [...previousUsersName, users]);
        })
    },[]);

    return (
             <div>
                {
                    usersName.map((name, i) => (
                        <div key={i}>
                            <p>
                                <span>{name[i].username}</span>
                            </p>
                        </div>
                    ))
                }
              <div/>

当I console.log（usersName）时，它以以下格式显示数组：

[Array(1)]
   0: Array(1)
      0:
         id: "yXXo7TXVHWN1bzl6AAAV"
         room: "Games"
         username: "Bruce"

我相信后端是正确的，因为我得到了所有用户。我认为的问题是我如何映射数组使用"name[i]. username"，因为当我重新加载页面，它打破了它，页面呈现的名称不正确，如上所述。

任何帮助都很感激，如果它令人困惑或我丢失了一些数据，请让我知道。

Answer 1

这是我使用name[i]. username在地图中显示名称的方式。

我猜是因为索引正在更新和破坏应用程序，当新用户进入页面时，它不会显示前辈，因为索引正在指向新用户。

我通过映射包含我在后端接收到的对象数组的第一个数组，并映射对象数组本身以显示名称，使其工作。

我在我的状态下保存数组的方式也是错误的。由于我正在接收所有已连接的用户，因此无需使用以前的用户填充阵列，然后添加新用户。

这里是变化

    const [usersName, setUsersName] = useState([]);

        socket.on('roomData', ({room, users}) => {
            setUsersName([users]);
        })


        {
            usersName.map((name,index) => 
                <div key={index}>
                    {
                        name.map((username, subindex) =>
                            <p key={subindex}>{username.username}</p>
                        )
                    }
                </div>
            )
        }