React useEffect 执行初始设置答案

【问题标题】：React useEffect execute initial setupReact useEffect 执行初始设置
【发布时间】：2022-01-20 23:38:31
【问题描述】：

我有一个父组件，它总是需要在子组件执行之前先检索一个令牌。正如本文What is the correct order of execution of useEffect in React parent and child components? 中所讨论的，子组件 useEffect 将首先执行。

我的问题是如何在初始加载时（在主组件中）处理检索令牌？

【问题讨论】：

你可以获取token然后渲染孩子，例如{token && >}
你试过用空括号吗？ useEffect(() => { // 你的代码 }, []);
是的，问题是子组件的 useEffect 在更高的组件之前执行。

标签： javascript reactjs rxjs

【解决方案1】：

我通过使用状态来跟踪会话是否已初始化来解决它。如果会话尚未初始化，则显示加载动画。这仅在应用程序的初始加载时执行。加载组件不能有需要 api 具有有效令牌或用户信息的 useEffect。

function App() {
  const [hasSession, setSession] = useState(false)

  useEffect(() => {
    async function initUserProfile() {
      await apiService.init()
      setSession(true)
    }

    initUserProfile()
  }, [])

  if (hasSession === false) {
    return (<Loading />)
  }

  return (
    <Router>...</Router>
  )
 }

【讨论】：