React中传递eventName给Socket监听器且保留关闭Socket能力的方法

核心问题是你用了匿名函数作为监听器，每次创建的都是新的函数引用，socket.off找不到匹配的函数，自然无法移除监听。要解决这个问题，你需要把每个变量对应的监听器函数保存下来，确保on和off用的是同一个引用。

修改后的代码如下：

useEffect(() => {
  const variables = ["variable1", "variable2", "variable3"];
  // 保存每个变量对应的监听器函数
  const listeners = new Map();

  const formulaParser = (value: number, eventName: string) => {
    console.log(value, eventName);
  };

  for (let i = 0; i < variables.length; ++i) {
    const eventName = variables[i];
    // 为当前变量创建绑定了eventName的监听器
    const listener = (msg: number) => formulaParser(msg, eventName);
    listeners.set(eventName, listener);
    socket.on(eventName, listener);
  }

  return () => {
    for (const [eventName, listener] of listeners) {
      socket.off(eventName, listener);
    }
  };
}, []);

关键说明： #

• 用Map保存每个事件名对应的监听器函数，确保每次on注册的函数和off移除的是同一个引用。
• 循环里把variables[i]赋值给局部变量eventName，避免闭包陷阱（用let循环其实也不会有问题，但显式赋值逻辑更清晰）。
• 返回的清理函数直接遍历Map里的键值对，调用socket.off移除对应监听。

你也可以用数组来存储监听器，逻辑和Map版本一致，看个人习惯选择：

useEffect(() => {
  const variables = ["variable1", "variable2", "variable3"];
  const listeners: { event: string; handler: (msg: number) => void }[] = [];

  const formulaParser = (value: number, eventName: string) => {
    console.log(value, eventName);
  };

  variables.forEach(eventName => {
    const handler = (msg: number) => formulaParser(msg, eventName);
    listeners.push({ event: eventName, handler });
    socket.on(eventName, handler);
  });

  return () => {
    listeners.forEach(({ event, handler }) => {
      socket.off(event, handler);
    });
  };
}, []);

内容的提问来源于stack exchange，提问作者Jantoma21