React Native如何解决已卸载组件React状态更新报错

React Native开发过程中会遇到如下警告：

ERROR Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

警告含义：无法对已卸载的组件执行React状态更新。该操作属于无效空操作，但表明应用存在内存泄漏问题，需要在useEffect的清理函数中取消所有订阅与异步任务完成修复。

触发警告的原始业务代码如下：

useEffect(() => {
  userIsRegister();
  if (sendMessage === '') {
    getAllMessage();
  }
}, [sendMessage, isFocused]);

该段代码中useEffect依赖项为sendMessage、isFocused，执行逻辑包含userIsRegister()调用，以及sendMessage为空时调用getAllMessage()。警告触发的核心原因是：组件卸载或者依赖变化触发effect重新执行时，之前启动的userIsRegister、getAllMessage异步任务还未执行完成，等异步任务返回结果尝试更新组件状态时，组件已经被卸载，就会触发该警告。

• 新增组件挂载状态标记，在useEffect的清理函数中更新标记状态，所有异步任务的状态更新逻辑前先校验组件挂载状态，拦截卸载后的更新操作。修复后的代码如下：

useEffect(() => {
  // 标记组件是否处于挂载状态
  let isMounted = true;

  const loadData = async () => {
    await userIsRegister();
    if (sendMessage === '' && isMounted) {
      await getAllMessage();
    }
  };

  loadData();

  // 清理函数：组件卸载、effect重跑前会执行
  return () => {
    isMounted = false;
    // 如果请求方法支持主动取消（比如fetch的AbortController、axios的CancelToken），在这里直接调用取消方法终止未完成的请求，能从根源上避免无效任务执行
  };
}, [sendMessage, isFocused]);

如果userIsRegister、getAllMessage方法内部写了状态更新逻辑，需要在每一处状态更新前增加isMounted判断，确认组件仍在挂载状态再执行更新。

• 额外注意事项：
  • 不要直接给useEffect第一个参数传async函数，async函数默认返回Promise，会导致React无法正确识别、执行返回的清理函数
  • 如果使用了定时器、事件监听器、全局订阅这类逻辑，必须在清理函数中执行清除操作，比如clearInterval、removeEventListener、取消订阅方法等
  • 如果项目接入了React Query、SWR这类成熟的数据请求库，这类库内置了卸载拦截逻辑，直接使用库提供的请求hook即可避免这类警告，不需要手动写标记判断。

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