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

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