标签：const perform mountedRef React 报错 卸载 组件 页面

在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()获取当前组件是否依然保持挂载，如果挂载了，则更新状态，反之不更新，避免更新出错。

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

搜索

复制

标签：const,perform,mountedRef,React,报错,卸载,组件,页面
来源： https://www.cnblogs.com/coder--wang/p/16517480.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。