为什么 react setState 在 useEffect 中不起作用？

Question

您好，我正在尝试使用 React 和 Socket.io 构建聊天应用程序。还有一部分是我从服务器向客户端发出“已加入”事件，让客户端知道他已成功加入房间，并发送房间的聊天记录。这是客户端处理“joined”事件的方式：

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

我将第二个参数 ([currentRoom]) 传递给 useEffect，因为如果我不这样做，“joined”将被调用 4 或 5 次。

我在 setCurrentRoom 回调中尝试了 console.logging 以查看是否正在调用 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);
   };
}, []);