React Native 组件卸载无法更新state，useEffect清理函数不生效问题

问题根本原因 #

你添加的mounted标记仅拦截了useEffect回调中loadImage().then()里的一次状态更新，但loadImage函数内部本身存在多处未做挂载判断的状态更新逻辑：

• 函数开头的setError(null)、setIsLoading(true)
• 异常捕获分支的setError(err.message)
• 函数结尾的setIsLoading(false)
  当组件卸载后，这些位于异步请求回调链路中的状态更新仍然会执行，所以警告不会消失。

可行解决方案 #

方案1：全链路覆盖挂载状态判断 #

将loadImage逻辑移入useEffect内部，直接复用同作用域下的mounted标记，所有状态更新前都先判断组件是否仍挂载：

const image = useSelector((state) => state.images.image);
const dispatch = useDispatch();

useEffect(() => {
  let mounted = true;

  const loadImage = async () => {
    if (!mounted) return;
    setError(null);
    setIsLoading(true);
    try {
      await dispatch(actions.fetchImage());
      if (mounted) {
        setIsLoading(false);
      }
    } catch (err) {
      if (mounted) {
        setError(err.message);
        setIsLoading(false);
      }
    }
  };

  loadImage();

  return () => {
    mounted = false;
  };
}, [dispatch, setIsLoading, setError]);

该方案改动最小，可快速消除警告。

方案2：直接取消未完成的异步请求（更推荐） #

仅做挂载判断仍然会让已经发起的请求跑完，浪费带宽和服务端资源，建议从根源终止未完成的Redux异步任务：
如果你使用Redux Thunk做异步处理，可以在Thunk中支持AbortController终止请求：

// 改造fetchImage action
const fetchImage = () => async (dispatch) => {
  const controller = new AbortController();
  try {
    const res = await fetch('/your/image/api', {
      signal: controller.signal
    });
    const data = await res.blob();
    dispatch({ type: 'FETCH_IMAGE_SUCCESS', payload: data });
    return controller.abort.bind(controller);
  } catch (err) {
    if (err.name !== 'AbortError') {
      dispatch({ type: 'FETCH_IMAGE_FAIL', payload: err.message });
    }
  }
};

组件侧在清理函数中调用终止方法：

useEffect(() => {
  let abortFn;
  setIsLoading(true);
  setError(null);

  const loadImage = async () => {
    try {
      abortFn = await dispatch(actions.fetchImage());
      setIsLoading(false);
    } catch (err) {
      setError(err.message);
      setIsLoading(false);
    }
  };
  loadImage();

  return () => {
    abortFn?.();
  };
}, [dispatch, setIsLoading, setError]);

如果是用Redux Toolkit Query做异步请求，直接使用其自带的自动清理、请求取消能力即可，无需手动处理挂载判断。

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