在react开发中经常会经常会碰到这种警告: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.
原因呢谁都知道在已卸载的组件上执行setState，解决方案有很多,在卸载的时候对所有的操作进行清除、增加一个标记页面卸载的时候重置这个标记等等。
这些解决方案都能解决这个问题，但对于我来说不是最好的解决方案，或者说不是我想要的解决方案，分享一个我的解决方案，拥抱hooks
import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
/**
* useUnmounted
* @returns boolean
* whether the component is unmounted
*/
export function useUnmounted() {
const unmountedRef = useRef(false);
useEffect(() => {
return () => {
unmountedRef.current = true;
};
}, []);
return unmountedRef.current;
}
/**
* @method useAsyncState
* Prevent React state update on an unmounted component.
*/
export function useAsyncState<S>(initialState?: S | (() => S)): [S | undefined, Dispatch<SetStateAction<S>>] {
const unmountedRef = useUnmounted();
const [state, setState] = useState(initialState);
const setAsyncState = useCallback((s) => {
if (unmountedRef) return;
setState(s);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return [state, setAsyncState];
}
使用也很方便
const [state, setState] = useState('test');
//替换为
const [state, setState] = useAsyncState('test');
原理我在这就不多做赘述了，就是一个思路的问题
更新于2021-12-30
