因为这是异步诺言调用，所以您必须使用来检查已卸载的组件，以进行异步响应的下一个处理（避免内存泄漏）：
警告：无法在已卸载的组件上执行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
}
}, []);
// ...
}
因此，结合 和 ，我们可以完全清除内存泄漏。
602392714
清零编程群