Zendesk React应用中ticket.updated事件绑定位置咨询

问题原因 #

你当前的写法会在每次formValue变更时，通过zafClient.on新增一个ticket.updated事件监听器，且旧的监听器未被移除。当ticket.updated事件触发时，所有已绑定的监听器都会执行，导致回调执行次数与formValue变更次数完全一致。

解决方案 #

方案一：使用Ref跟踪最新值，仅绑定一次事件（推荐）

通过React Ref实时同步最新的formValue，确保事件回调始终能获取到最新值，同时只在组件挂载时绑定一次监听器，避免重复绑定：

const YourComponent = () => {
  const [formValue, setFormValue] = React.useState(/* 初始值 */);
  // 创建Ref存储最新的formValue
  const formValueRef = React.useRef(formValue);

  // 同步formValue到Ref
  React.useEffect(() => {
    formValueRef.current = formValue;
  }, [formValue]);

  // 仅在组件挂载时绑定一次事件
  React.useEffect(() => {
    const handleTicketUpdated = (e) => {
      console.log("executed", formValueRef.current);
    };

    zafClient.on('ticket.updated', handleTicketUpdated);

    // 组件卸载时移除监听器，避免内存泄漏
    return () => {
      zafClient.off('ticket.updated', handleTicketUpdated);
    };
  }, []);

  // 其他组件逻辑...
};

方案二：每次绑定前移除旧监听器

如果必须依赖formValue绑定事件，可以在useEffect的清理函数中移除旧监听器，确保每次formValue变更时只有最新的监听器生效：

const YourComponent = () => {
  const [formValue, setFormValue] = React.useState(/* 初始值 */);

  React.useEffect(() => {
    const handleTicketUpdated = (e) => {
      console.log("executed", formValue);
    };

    zafClient.on('ticket.updated', handleTicketUpdated);

    // 当formValue变更时，移除当前监听器
    return () => {
      zafClient.off('ticket.updated', handleTicketUpdated);
    };
  }, [formValue]);

  // 其他组件逻辑...
};

注意事项 #

• 不要给useEffect传递async函数：useEffect的返回值必须是清理函数（或undefined），async函数会返回Promise，导致清理逻辑失效。如果需要异步操作，应在useEffect内部定义async函数并调用。
• 始终添加清理函数：使用zafClient.off移除监听器，避免组件卸载后仍存在无效监听器导致内存泄漏。

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