Почему реакция setState не работает внутри useEffect?

Question

Здравствуйте. Я пытаюсь создать приложение для чата, используя React и Socket.io. И есть часть, где я отправляю «присоединенное» событие от сервера к клиенту, чтобы сообщить клиенту, что он успешно присоединился к комнате, а также отправить историю чата этой комнаты. Вот как клиент обрабатывает событие «join»:

useEffect(() => {
   socket.on('joined', (roomx) => { setCurrentRoom(roomx); setMessages(roomx.messages)});
}, [currentRoom]);

Я передал второй аргумент ([currentRoom]) для useEffect, потому что, если я этого не сделаю, метод «join» будет вызываться 4 или 5 раз .

Я попытался console.logging в обратном вызове setCurrentRoom, чтобы посмотреть, вызывается ли вообще setCurrentRoom, например:

setCurrentRoom(roomx, () => { console.log(currentRoom)};

Однако ничего не регистрируется.

Кто-нибудь знает, что мне здесь не хватает? или делаешь неправильно?

Answer 1

setCurrentRoom(roomx, () => { console.log(currentRoom)};

setCurrentRoom не имеет второго аргумента в качестве обратного вызова вместо this.setState. Вот почему ничего не регистрируется.

---

useEffect(() => {
   socket.on('joined', (roomx) => { setCurrentRoom(roomx); setMessages(roomx.messages)});
}, [currentRoom]);

Вам не нужно currentRoom во втором аргументе. [currentRoom] это означает, что каждый раз, когда currentRoom был изменен - ​​вызывать первый аргумент из useEffect. Я предполагаю, что вы хотите вызвать socket.on только один раз.

вот пример

useEffect(() => {
   socket.on('joined', (roomx) => {
     setCurrentRoom(roomx);
     setMessages(roomx.messages);
   });
}, []);

И если компонент будет размонтирован, вы должны удалить слушателя.

useEffect(() => {
   const listener = (roomx) => {
     setCurrentRoom(roomx);
     setMessages(roomx.messages);
   };

   socket.on('joined', listener);

   return () => {
     socket.off('joined', listener);
   };
}, []);