React开发中常见报错之组件更新错误

最新推荐文章于 2025-07-10 23:34:35 发布

原创最新推荐文章于 2025-07-10 23:34:35 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

React 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在React开发中遇到的一个常见问题：尝试对已卸载的组件更新状态导致的警告。当在A页面请求数据过程中切换到B页面，返回的数据可能会触发已卸载的A组件的setState()，从而引发异常。为了解决这个问题，文章提供了一个使用useMountedRef Hook 的解决方案，通过判断组件是否挂载来决定是否更新状态，避免了错误的发生。这个方法确保只有在组件挂载状态下才会执行setState()，从而保持应用的正常运行。

在React开发中，这样的报错会经常遇到：Warning: Can't perform a React state update on an unmounted component.

原因就是报错中所说：无法对已卸载的组件执行react状态更新。

假设现在我们正在A页面调接口请求数据，请求成功后setState()更新数据，这是没有问题的。

但是如果A页面在请求接口途中，切换路由跳转至B页面，这时候A页面的数据请求还在进行中，等到数据返回的时候，调用setState()发现A组件被卸载了，就会抛出以上异常。

下面是解决办法：

/**
 * 返回组件的挂载状态，如果还没挂载或者已经卸载，返回false；反之，返回true
 */
export const useMountedRef = () => {
  const mountedRef = useRef(false);

  useEffect(() => {
    mountedRef.current = true;
    return () => {
      mountedRef.current = false;
    };
  });

  return mountedRef;
};

A页面中:

const A = () => {
  const mountedRef = useMountedRef();
  const [list, setList] = useState([])
  queryList().then(res => {
      if (mountedRef.current) { // 当组件未卸载则setList()
        setList(res.data)
      }
    })
   // 略
}

通过useMountedRef()获取当前组件是否依然保持挂载，如果挂载了，则更新状态，反之不更新，避免更新出错。

脚踏实地行，海阔天空飞~