React/React Context API：使用 useEffect() 钩子时等待上下文值

Question

我正在使用 React 开发一个网络应用程序，这是我想要做的：

1. 在最高阶组件中，检查用户是否已登录，如果已登录，则更新“userinfo”上下文值。
2. 在 Profile.js 中，获取“userinfo”上下文值。
3. 检查 'userinfo' 是否为空，并相应地调用不同的 API。

我写了下面的代码。问题是将 userinfo 上下文值传递给组件显然存在时间延迟。因此，当使用 useEffect() 钩子时，当 userinfo 不为 null 时，Profile.js 将呈现两次。

有没有办法修复此代码，使其等待 'userinfo' 变量，然后相应地调用相关 API，而不是之前？

下面是代码。有什么建议吗？非常感谢！

import React, {useEffect, useContext} from 'react';
import Userinfo from "../context/Userinfo";


function Profile(props) {

   const {userinfo, setuserinfo}=useContext(Userinfo);

   useEffect(()=>{      
       ((userinfo==null)?
       /*API call A (When user is not logged in) */ :
       /*API call B (When user is logged in) */
       )},[userinfo])  

   return (
       (userinfo==null)?
       /*Elements to render when user is not logged in) */ :
       /*Elements to render when user is  logged in) */
   );
}

export default Profile;

Answer 1

这里最好的解决方案是在上下文提供程序中添加一个加载状态，一旦值更新就会重置。

function Profile(props) {

   const {userinfo, loading, setuserinfo}=useContext(Userinfo);

   useEffect(()=>{      
       if(!loading) {
            ((userinfo==null)?
             /*API call A (When user is not logged in) */ :
            /*API call B (When user is logged in) */
            )
       }
    )},[loading, userinfo])  

   if(loading) return <Loader />
   return (
       (userinfo==null)?
       /*Elements to render when user is not logged in) */ :
       /*Elements to render when user is  logged in) */
   );
}