使用 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

当效果再次触发时，您需要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]);