React Navigation自定义goBack按钮触发未挂载组件更新警告如何解决

这个警告的本质是组件已经被卸载后，仍然有代码尝试对该组件执行状态更新操作。你只有点击自定义返回按钮触发navigation.goBack()时才出现警告，是因为自定义返回的执行时机比系统自带返回、手势返回更早，此时ChatScreen内还有未完成的异步请求、定时器、事件订阅等逻辑在运行，执行完成后触发的状态更新操作作用在了已经卸载的组件上。

按排查优先级排序：

• 新增组件挂载标记，拦截卸载后的状态更新
  在ChatScreen函数组件内新增isMounted标记，所有状态更新操作执行前先判断组件是否还处于挂载状态：

import { useEffect, useRef, useState } from 'react';

const ChatScreen = ({ navigation }) => {
  const isMounted = useRef(true);
  // 你的其他状态定义，比如const [chatList, setChatList] = useState([])

  useEffect(() => {
    // 组件卸载时修改标记
    return () => {
      isMounted.current = false;
    };
  }, []);

  // 示例：所有异步回调更新状态前先判断标记
  const getChatHistory = async () => {
    const data = await fetch('/api/chat/history').then(res => res.json());
    // 仅组件挂载时才更新状态
    if (isMounted.current) {
      setChatList(data);
    }
  };

  // 其余业务逻辑
}

• 清理所有副作用任务
  在ChatScreen的useEffect清理函数中，终止所有未完成的异步任务、订阅、定时器：
  • 若使用WebSocket/EventEmitter监听事件，调用对应的取消监听方法
  • 若存在setTimeout/setInterval定时器，调用clearTimeout/clearInterval清理
  • 若使用Axios发起请求，配置CancelToken在卸载时取消未完成的请求
• 调整自定义返回按钮的执行逻辑（临时快速修复方案）
  如果暂时无法快速排查所有异步逻辑，可以给navigation.goBack()加极短的延迟，等当前同步任务、微任务执行完成后再触发页面卸载：

<TouchableOpacity 
  style={{height: 60, width: 60, justifyContent: "center", alignItems: "center"}} 
  onPress={() => setTimeout(() => navigation.goBack(), 0)}
>
  <BackArrow />
</TouchableOpacity>

• 检查返回按钮点击逻辑是否存在多余状态更新
  确认你点击返回按钮的逻辑中，navigation.goBack()之后是否还有同步执行的setState操作，如果有需要删掉或者移到goBack()之前执行。

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