sockets - 使用 useEffect 时复制 socket.io 监听器

Question

React.useEffect(() => {
    socket
      .on(conversationName, (message) => {
        // push into list messages a new one 
      });
  }, [conversationName]);

当用户在侧边栏上选择一个对话时，一个对话名称将从后端发送回并存储在名为 conversationName 的 React 状态中。我使用 useEffect 来捕获该更改

还有一个套接字正在监听事件名称 conversationName 以获取新消息。

我的问题是，当用户切换回特定对话n 次 时，用户发送的消息将被重复n 次

例如，有 2 个对话，分别称为 A 和 B。他点击 A，聊天一些消息，点击 B，然后点击返回 A。从现在开始，他发送的任何消息都会重复 2 次。

寻求一些建议，非常感谢你们!

Answer 1

您需要clean up the listener当效果再次触发时:

React.useEffect(() => {
    const listener = (message) => {
      // push into list messages a new one 
    };
    socket.on(conversationName, listener);

    return () => socket.off(conversationName, listener);
  }, [conversationName]);