因为这是异步诺言调用,所以您必须使用来检查已卸载的组件,以进行异步响应的下一个处理(避免内存泄漏):
警告:无法在已卸载的组件上执行React状态更新。
在这种情况下,您应该使用两个React Hook:useRef
和useEffect
。
useRef
例如,使用时,可变变量_isMounted
始终指向内存中的同一引用 (而不是局部变量)
是定位钩。与局部变量不同,React确保在每次渲染期间都返回相同的引用。如果需要,*
范例:
const login = (props) => {
const _isMounted = useRef(true); // Initial value _isMounted = true
useEffect(() => {
return () => { // ComponentWillUnmount in Class Component
_isMounted.current = false;
}
}, []);
function handleSubmit(e) {
e.preventDefault();
setLoading(true);
ajaxCall = Inertia.post(window.route('login.attempt'), values)
.then(() => {
if (_isMounted.current) { // Check always mounted component
// continue treatment of AJAX response... ;
}
)
}
}
同时,让我向您解释有关此处使用的React Hooks的更多信息。另外,我将功能组件中的React Hooks(版本React> 16.8)与类组件中的LifeCycle进行比较。
:大多数副作用发生在钩子内部。副作用的示例包括:数据获取,设置订阅以及在React组件中手动更改DOM。useEffect替换了类Component中的许多生命周期(componentDidMount,componentDidUpate,componentWillUnmount)
useEffect(fnc, [dependency1, dependency2, ...]); // dependencies array argument is optional
1)如果您没有依赖项,则useEffect的默认行为在第一个渲染 (例如ComponentDidMount) 之后和每个更新渲染(例如ComponentDidUpdate) 之后运行。就像那样 :useEffect(fnc);
2)将依赖项数组赋予useEffect将更改其生命周期。在这个例子中:useEffect将在第一个渲染之后被调用一次,并且每次计数改变时
export default function () {
const [count, setCount] = useState(0);
useEffect(fnc, [count]);
}
3)如果您为依赖项放置一个空数组,则useEffect将在第一个渲染_(如ComponentDidMount)_之后仅运行一次。就像那样:useEffect(fnc, []);
4)为防止资源泄漏,必须在挂钩的生命周期结束时处置所有组件(例如ComponentWillUnmount)。例如,对于空的依赖关系数组,将在组件卸载后调用返回的函数。就像那样 :
useEffect(() => {
return fnc_cleanUp; // fnc_cleanUp will cancel all subscriptions and asynchronous tasks (ex. : clearInterval)
}, []);
对象的.current*属性已初始化为所传递的参数(initialValue)。返回的对象将在组件的整个生命周期内保持不变。
例子:对于上面的问题,我们不能在这里使用局部变量,因为它将在每次更新渲染时丢失并重新启动。
const login = (props) => {
let _isMounted= true; // it isn't good because of a local variable, so the variable will be lost and re-initiated on every update render
useEffect(() => {
return () => {
_isMounted = false; // not good
}
}, []);
// ...
}
因此,结合 和 ,我们可以完全清除内存泄漏。