слушатель socket.io запускает слишком много раз в функциональном React

Question

Я создаю онлайновую настольную игру с помощью приложения create-реакции-app, реагирую на перехватчики и использую sockets.io для передачи данных (местоположение игрока, активный игрок и т. Д. c.) Между подключенными пользователями. Поток логики c заключается в том, что пользователь делает выбор, этот выбор добавляется в массив в состоянии, а затем обновленное состояние передается через сокеты всем подключенным пользователям. Проблема заключается в том, что прослушиватель useEffect, отвечающий за получение данных сокета от внутреннего сервера и обновление пользовательских данных для каждого подключенного пользователя, запускается слишком много раз, а не один раз.

Код:

Отправить вызов на внутренний номер:

try {
          console.log(currentCard, typeof(currentCard.title), tech)
          setUser1Data({
            ...user1Data,
             userTech: [...user1Data.userTech, currentCard.title]
          });
        } finally {
          console.log(user1Data)
            socket.emit("p1state", user1Data);
           pass();
        }

Внутренний приемник / излучатель:

socket.on("p1state", function(state) {
    console.log(state)
    io.emit("p1state", state)
  })

Слушатель клиента:

  useEffect(() => {
    socket.on("p1state", state => {
      console.log("1")
      setUser1Data({...user1Data, state});
    });
  }, [user1Data]);

Some " интересные вещи, которые я заметил: этот useEffect запускается слишком много раз. При первом запуске он устанавливает все так, как должен, но затем каждый последующий раз перезаписывает предыдущий параметр, возвращаясь к исходному объекту состояния user1Data.

Кроме того, на заднем плане у меня есть консоль. ведение журнала при подключении клиента. Несмотря на то, что в данный момент я тестирую только локально с одной вкладкой браузера, он все еще регистрирует несколько событий, связанных с пользователем.

Answer 1

useEffect в настоящее время использует состояние в массиве зависимостей и устанавливает то же состояние в функции средства обновления. Как видите, это приводит к бесконечному l oop.

useEffect(() => {
    socket.on("p1state", state => {
      console.log("1")
      setUser1Data(userData => ({...userData, state}));
    });
}, []);

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