React useEffect 执行初始设置

Question

我有一个父组件，它总是需要在子组件执行之前先检索一个令牌。 正如这篇文章中所讨论的，React 父子组件中 useEffect 的正确执行顺序是什么？ 子组件 useEffect 首先执行。

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

Answer 1

我通过使用 state 来跟踪 session 是否已初始化来解决它。 如果 session 尚未初始化，则显示加载 animation。 这仅在应用程序的初始加载时执行。 加载组件不能具有需要具有有效令牌或用户信息的 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> ) }