1. 错误
1.1 错误内容
Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
1.2 错误截图
2. 错误分析
无法对已卸载的组件执行react状态更新。
3. 错误出现的场景
- 页面存在异步加载数据等类似操作;
- 但是异步加载未完成,就跳转到其他页面,当前页面被卸载;
- 卸载后的组件进行状态更新,所以报错。
4. 解决办法 react hooks
- useUnmounted 进行判断组件是否被卸载;
- useAsyncState 防止在已卸载的组件上更新状态。
import { useCallback, useEffect, useRef, useState } from 'react';
export function