OneSignal集成场景下使用Hooks触发React Hook规则错误的问题咨询

• 触发了React Hook的合法性校验：Hook仅允许在React函数组件顶层、自定义Hook的顶层调用，禁止在SDK事件回调、普通异步函数、脱离React渲染执行栈的场景中调用
• 你之前的操作大概率是将useProject这类自定义Hook直接放入了OneSignal的received、opened事件处理函数中，这类回调由OneSignal SDK主动触发，不在React的渲染调用链内，自然会抛出Hook规则相关错误。

核心思路是将所有Redux Hook的调用上移到useOneSignal的顶层，通过引用桥接的方式让SDK事件回调能拿到最新的Redux状态，既不违反Hook规则，也能避免闭包导致的旧值问题。

• 第一步：在自定义Hook顶层合法调用useSelector，获取存储在Redux中的项目ID与URL的映射字典
• 第二步：通过useRef保存最新的映射字典数据，让OneSignal的事件回调始终能读取到最新状态，解决空依赖effect的闭包旧值问题
• 第三步：将事件处理函数定义在effect内部，组件卸载时同步移除事件监听，避免内存泄漏

修正后的参考代码：

const useOneSignal = () => {
  // Hook顶层调用，符合React Hook规则
  const projectsDict = useSelector(selectProjectsAsDict);

  // 桥接最新Redux数据到ref对象
  const projectsRef = useRef(projectsDict);
  useEffect(() => {
    projectsRef.current = projectsDict;
  }, [projectsDict]);

  return useEffect(() => {
    // 事件回调内部直接读取ref中的数据，不需要调用Hook
    const onReceived = (event: any) => {
      const targetProject = projectsRef.current[event.projectID];
      // 执行通知接收后的业务逻辑
    };

    const onOpened = (event: any) => {
      const targetProject = projectsRef.current[event.notification.projectID];
      // 执行通知点击后的跳转逻辑
    };

    OneSignal.setLogLevel(6, 0);
    OneSignal.init(ONESIGNAL.appID, {
      kOSSettingsKeyAutoPrompt: false,
      kOSSettingsKeyInAppLaunchURL: false,
    });

    OneSignal.addEventListener("received", onReceived);
    OneSignal.addEventListener("opened", onOpened);

    OneSignal.inFocusDisplaying(2);

    // 组件卸载时清理事件监听
    return () => {
      OneSignal.removeEventListener("received", onReceived);
      OneSignal.removeEventListener("opened", onOpened);
    }
  }, []);
};

• 不要在事件回调中直接调用useProject或useSelector：React内部靠固定顺序的Hook链表追踪组件状态，非渲染流程内的Hook调用会直接打乱链表顺序，触发规则报错。
• 避免直接在空依赖的effect中引用外部Redux数据：空依赖的effect只会在组件挂载时执行一次，直接引用外部变量会捕获到组件初始渲染时的旧值，导致后续Redux状态更新后，回调里读到的还是旧数据。
• 原代码中的onReceived.bind(this)在函数组件Hook中没有实际意义，自定义的普通事件函数可以直接被SDK注册，还能方便在组件卸载时精准移除对应监听，避免重复注册导致的多次触发问题。

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