React Native函数组件处理401响应及未挂载组件状态更新警告

这个警告我太熟了！本质上是你的API请求还在pending的时候，组件已经因为401跳转被卸载了，但请求完成后你还是尝试调用setMovie去更新一个已经不存在的组件状态，React当然会抛出警告提醒你。下面是在函数组件里处理这个问题的两种最佳方式：

方案一：用useRef跟踪组件挂载状态（通用方案） #

我们可以用useRef创建一个标志来记录组件当前是否处于挂载状态。组件挂载时把标志设为true，卸载时通过useEffect的清理函数把它设为false，然后在尝试更新状态前先检查这个标志。

修改后的代码示例 #

export default function MovieDetailsScreen() {
  const [movie, setMovie] = useState({});
  const movieId = useNavigationParam('movieId');
  const navigation = useNavigation(); // 记得获取navigation实例
  // 创建ref跟踪组件挂载状态
  const isMounted = useRef(false);

  useEffect(() => {
    // 组件挂载时标记为已挂载
    isMounted.current = true;

    Client.movies.show(movieId)
      .then(result => {
        // 更新状态前先确认组件还处于挂载状态
        if (isMounted.current) {
          setMovie(result);
        }
      })
      .catch(error => {
        // 专门处理401的跳转逻辑
        if (error.response?.status === 401) {
          navigation.navigate('Login');
        }
        // 其他错误可在此额外处理
      });

    // 组件卸载时的清理：标记为未挂载
    return () => {
      isMounted.current = false;
    };
  }, [movieId, navigation]); // 别漏了依赖项，避免闭包陷阱

方案二：用AbortController取消请求（更彻底的方案） #

如果你的请求库（比如你封装的fetch）支持AbortSignal，那直接在组件卸载时取消未完成的请求是更彻底的解决方案——从根源上避免后续的状态更新操作，还能节省不必要的网络资源。

代码示例 #

export default function MovieDetailsScreen() {
  const [movie, setMovie] = useState({});
  const movieId = useNavigationParam('movieId');
  const navigation = useNavigation();

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    // 假设你的Client库支持传入signal参数到请求配置里
    Client.movies.show(movieId, { signal })
      .then(result => {
        setMovie(result);
      })
      .catch(error => {
        // 请求被取消时直接忽略这个错误
        if (error.name === 'AbortError') return;
        
        if (error.response?.status === 401) {
          navigation.navigate('Login');
        }
      });

    // 组件卸载时取消请求
    return () => {
      abortController.abort();
    };
  }, [movieId, navigation]);

额外提醒 #

1. 补全useEffect依赖项：原代码里的依赖数组是空的，但movieId和navigation都是useEffect里用到的变量，一定要加到依赖数组里，不然会出现闭包导致的旧值问题。
2. 错误处理要到位：务必在catch块里处理401错误，这样能及时触发登录跳转，避免组件还挂着的时候出现其他异常。
3. 选择适合的方案：如果你的请求库不支持AbortController，就用方案一；如果支持，优先用方案二，体验和性能都会更好。

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