如何修复，无法对未挂载的组件执行 React 状态更新？

Question

我的代码有问题。这是我的代码在App.tsx

function App() {
const dispatch = useDispatch();
const auth = useSelector((state: RootStateOrAny) => state.auth);
const token = useSelector((state: RootStateOrAny) => state.token);
useEffect(() => {
const firstlogin = localStorage.getItem('firstlogin');
if(firstlogin) {
const getUserToken = async () => {
const res: any = await axios.post('/user/refresh_token', null);
dispatch({type: "GET_TOKEN", payload: res.data.access_token});
};
getUserToken();
}
}, [auth.isLogged, dispatch]);
useEffect(() => {
if(token){
const getUser = () => {
dispatch(dispatchLogin());
return fetchUser(token).then(res => {
dispatch(dispatchGetUser(res))
})
}
getUser();
}
},[token, dispatch]);
return (
<Router>
<div className="App">
<Header/>
<Body/>
</div>
</Router>
);
}
export default App;

当我试图访问位于Body组件下的Home组件中的状态时。它给了我一个错误说:"警告:无法在卸载的组件上执行React状态更新。这是一个无操作，但它表明应用程序中存在内存泄漏。要修复，请在useEffect清理函数中取消所有订阅和异步任务。">

这是我的Home组件:

import React from 'react';
import { useSelector, RootStateOrAny } from 'react-redux';
export default function Home() {

const auth = useSelector((state: RootStateOrAny) => state.auth);
const {username} = auth.user[0];
return(
<div>
Welcome {username} !
</div>
)
};

和Body组件:

export default function Body() {
const auth = useSelector((state: RootStateOrAny) => state.auth);
const {isLogged} = auth;

return (
<Switch>
<Route path="/signup">
{isLogged ? <Notfound/> : <Signup/>}
</Route>
<Route path="/login">
{isLogged ? <Notfound/> : <Login/>}
</Route>
<Route path="/home">
{isLogged ? <Home/> : <Login/>}
</Route>
<Redirect to="/home"/>
</Switch>
)
}

这些是我的减速机:

const initialState = {
user: [],
isAdmin: false,
isLogged: false,
};
const authReducer = (state = initialState, action: any) => {
switch(action.type) {
case ACTIONS.LOGIN :
return {
...state,
isLogged: true
}
case ACTIONS.GET_USER : 
return {
...state,
user: action.payload.user
}
default:
return state
}
}

我该如何解决这个问题?谢谢你。

Answer 1

如果你在路由中使用条件渲染，就会导致这种错误。因为组件挂载是由条件语句定义的。为此，你可以在Home组件的useeffect钩子中使用history.push("/")和条件语句。或者你可以检查can 't在一个未挂载的组件上执行React状态更新