使用效果顺序并定义何时运行

Question

我的主要功能是检查App.js中的授权，如下所示：

useEffect(() => {
if (token) {
let decodedToken = jwtDecode(token);
// @ts-ignore
if (decodedToken.exp * 1000 < Date.now()) {
dispatch(logoutUser());
} else {
axios.defaults.headers.common['Authorization'] = token;
dispatch(getUser());
}
}
}, [token, dispatch]);

然后，我在组件中有useEffects，有时某些useEffect()会先执行，因此某些dispatch会在获取授权之前执行。

如何确保我的App.js — useEffect()get在执行其他操作之前执行？

Answer 1

有几种方法可以做到这一点，包括Lazy导入等。但最直接的方法是创建符合rest应用程序渲染的加载状态

---

const [ initLoading, setInitLoading ] = useState(true)
useEffect(() => {
if (token) {
let decodedToken = jwtDecode(token);
// @ts-ignore
if (decodedToken.exp * 1000 < Date.now()) {
dispatch(logoutUser());
} else {
axios.defaults.headers.common['Authorization'] = token;
dispatch(getUser());
}
setInitLoading(false)
}
}, [token, dispatch]);
return(
<>
{ initLoading ? <div> loading </div> : <YourApp /> }
</>
)