使用 useEffect 时重复 socket.io 侦听器

Question

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

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

此外，套接字正在侦听事件名称conversationName以获取新消息。

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

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

寻求一些建议，非常感谢各位！

Answer 1

当效果再次触发时，您需要清理监听器：

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

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