useEffect 命令和定义何时运行

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 导入等。但最直接的方法是创建符合要渲染的其余应用程序的加载状态

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 /> }
  </>
 )

useEffect 命令和定义何时运行

useEffect order and defining when to run

reactjs

redux

use-effect

useEffect 命令和定义何时 运行

useEffect order and defining when to run

reactjs

redux

use-effect

useEffect 命令和定义何时运行