React / React Context API: ожидание значений контекста при использовании ловушки useEffect ()

Question

Я занимаюсь разработкой веб-приложения с использованием React, и вот что я пытаюсь сделать:

1. В компоненте высшего порядка проверьте, вошел ли пользователь в систему, и, если он вошел, обновите Значение контекста 'userinfo'.
2. В Profile. js получите значение контекста 'userinfo'.
3. Проверьте, имеет ли значение userinfo значение NULL или нет, и соответственно вызовите различные API.

Я написал следующий код. Проблема заключается в том, что, по-видимому, существует задержка во времени для доставки значения контекста userinfo в компонент. Поэтому при использовании ловушки useEffect () Profile. js будет визуализироваться дважды, когда userinfo не равен нулю.

Есть ли способ исправить этот код так, чтобы он ждал переменную '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) */
   );
}