Блог

Я создаю лобби для игры и хочу отобразить список игроков. Я наблюдаю за новыми игроками в комнате.

 const [roomUsers, setRoomUsers] = useState([])

useEffect(() => {
    if (room)
        DB.collection("room_users").where("room_id", "==", room.id)
            .onSnapshot((querySnapshot) => {
                const newRoomUsers = [];

                querySnapshot.forEach((doc) => {
                    newRoomUsers.push(doc.data());
                });

                setRoomUsers(newRoomUsers)
            });
})
 

Когда я присоединяюсь во втором окне, количество игроков меняется, но список обновляется с течением времени. Когда я присоединяюсь больше раз, список вообще перестает обновляться.

 <h4>Players list ({roomUsers.length}/4)</h4>

{roomUsers.map(roomUser => (
   <PlayerListItem
      roomUser={roomUser}
      owner={roomUser.uuid === room.owner}
   />
 ))}
 

В компоненте PlayerListItem я выбираю пользователя через uuid

 const [user, setUser] = useState(null)

useEffect(() => {
    DB.collection('users').where('uuid', '==', roomUser.uuid).get().then(snapshot => {
        if (!snapshot.empty)
            setUser(snapshot.docs[0].data())
    })
}, [])
 

Затем я возвращаю имя пользователя через компонент.

Иногда одно и то же имя пользователя появляется в списке дважды вместо разных

В вашем эффекте использования отсутствует массив зависимостей. Он также должен возвращать функцию очистки

 useEffect(() => {
    if (!room) {
        return;
    }

    const unsub = DB.collection("room_users").where("room_id", "==", room.id)
        .onSnapshot((querySnapshot) => {
            const newRoomUsers = [];
             querySnapshot.forEach((doc) => {
                newRoomUsers.push(doc.data());
            });

            setRoomUsers((currVal) => {
                console.log({currVal, newRoomUsers})

                const newVal = [] // change this to be correct

                return newVal
            })
    });

    return () => unsub();

}, [room])