无法对未挂载的组件执行 React 状态更新。请帮帮我

Question

我正在创建一个用户会话，通过api询问服务器，如果会话已经存在，如果它存在，将会话的状态更改为true，但我得到这个错误"不能在卸载的组件上执行React状态更新。这是一个无操作，但它表明应用程序中存在内存泄漏。要修复，在useEffect清理函数中取消所有订阅和异步任务。">

const [session, setSession] = useState();
Axios.defaults.withCredentials = true;
useEffect(() => {
Axios.get('http://localhost:3001/admin/api/session').then((res) => {
if (res.data.login === true){
setSession(true);
}
})
}, []);
if(session){
return <Route {...restoDePropiedades}>{children}</Route>
}else{
return <Redirect to="/admin-login"/>
}

Answer 1

问题是您的组件在异步Axios请求完成之前卸载了。因此，它试图在组件卸载后调用setSession。

您可以使用ref来存储组件的挂载状态，并在Axios请求完成时在if条件下使用它:

const unmounted = useRef(false);
useEffect(() => {
Axios.get('http://localhost:3001/admin/api/session').then((res) => {
// Check if component has unmounted before trying to update state
if (!unmounted.current) {
if (res.data.login === true) {
setSession(true);
}
}
})
}, []);
useEffect(() => {
// This function will run when the component unmounts
return () => {
unmounted.current = true;
}
}, []);

Answer 2

你可以遵循的方法，每个组件，使异步请求应该至少处理最常见的状态，例如loading和error，所以你可以引入loading状态至少，特别是如果你需要检查会话针对API做任何事情

。

const [session, setSession] = useState();
const [loading, setLoading] = useState(true)
useEffect(() => {
Axios.get('http://localhost:3001/admin/api/session').then((res) => {
if (res.data.login === true){
setSession(true);
}
})
.finally(() => setLoading(false))
}, []);
if (loading) return <Loading />
if(session){
return <Route {...restoDePropiedades}>{children}</Route>
}else{
return <Redirect to="/admin-login"/>
}

或者任何你需要处理路由的方式当它加载

时