React使用RefreshControl刷新中途切页触发组件卸载报错如何解决

报错本质是延时任务没有在组件卸载时被清理：触发下拉刷新后setTimeout会被推入异步队列，如果你在2秒等待期切走页面，组件已经卸载，但延时到点后依然会执行setRefreshing(false)更新状态，就会触发已卸载组件更新状态的警告。
你之前用useEffect修复没生效，基本都是因为没有存下setTimeout返回的定时器ID，清理的时候找不到要清除的延时任务，等于清理逻辑写了个空壳。

优先选第一种直接清理异步任务的方案，没有额外内存占用。

• 方案1：useEffect 清理定时器（推荐）
  用useRef存定时器ID，组件卸载时直接调用clearTimeout销毁未执行的延时任务，从根源解决问题。
  完整实现代码：

  import { useRef, useState, useEffect, useCallback } from 'react';
  import { ScrollView, RefreshControl } from 'react-native';
  
  export default function RefreshPage() {
    const [refreshing, setRefreshing] = useState(false);
    // 存储定时器ID的ref，组件全生命周期内可访问
    const refreshTimer = useRef(null);
  
    const onRefresh = useCallback(() => {
      setRefreshing(true);
      // 存下当前定时器的ID
      refreshTimer.current = setTimeout(() => {
        setRefreshing(false);
        refreshTimer.current = null;
      }, 2000);
    }, []);
  
    // 组件卸载时执行清理
    useEffect(() => {
      return () => {
        if (refreshTimer.current) {
          clearTimeout(refreshTimer.current);
          refreshTimer.current = null;
        }
      };
    }, []);
  
    return (
      <ScrollView
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      >
        {/* 你的页面业务内容 */}
      </ScrollView>
    )
  }
  

• 方案2：挂载状态拦截（不推荐，临时兜底用）
  如果项目里异步逻辑太多不好逐个清理，可以用ref存组件挂载状态，异步任务执行更新前先判断组件是否还在挂载中，未挂载就跳过状态更新。注意这个方案不会销毁后台的异步任务，只是不触发状态更新，依然有隐性内存占用，仅做临时兜底。
  核心逻辑代码：

  const [refreshing, setRefreshing] = useState(false);
  const isMounted = useRef(false);
  
  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);
  
  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      // 组件已卸载就不执行状态更新
      if (isMounted.current) {
        setRefreshing(false);
      }
    }, 2000);
  };
  

注意：所有异步任务（接口请求、定时器、事件监听）都要在组件卸载时做对应清理（取消请求、清定时器、移除监听），不要只靠挂载状态拦截，才能从根源避免内存泄漏问题。

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