如何取消订阅DeviceEventEmitter事件监听器？React Native场景问题

问题根源 #

你的useEffect只在isAuthenticated为true时添加监听器，但当用户登出（isAuthenticated变为false）或者组件卸载时，没有主动移除之前注册的UNAUTHORIZED事件监听器，导致残留的监听器继续触发，引发异常。

解决方案 #

利用useEffect的清理函数（即useEffect返回的函数）来注销监听器，同时要保存监听器的引用——因为Doorman.guard()返回的是DeviceEventEmitter.addListener()的结果，这个对象自带remove()方法可以移除监听器。

修改后的代码 #

useEffect(() => {
  let listener;
  if (isAuthenticated) {
    // 保存监听器引用，方便后续移除
    listener = Doorman.guard(onSessionExpiration);
  }

  // 清理函数：当isAuthenticated变化（比如从true变false）、回调函数更新或组件卸载时执行
  return () => {
    if (listener) {
      listener.remove();
    }
  };
}, [isAuthenticated, onSessionExpiration]);

细节说明 #

• 当isAuthenticated从true变为false时，useEffect会先执行上一次的清理函数，移除旧监听器，再执行新的effect逻辑（此时不会添加新监听器）。
• 如果onSessionExpiration函数发生变化，清理函数也会先移除旧的监听器，再添加新的，避免多个旧版本的回调被触发。
• 该逻辑覆盖了所有需要注销监听器的场景：用户登出、组件卸载、回调函数更新。

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