React Hooks: визуализировать компонент после изменения значения, сохраненного в контекстном API?

Question

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

1. Получить информацию о пользователе из базы данных и сохранить ее с помощью Context API.

2. Визуализация компонента при контекст меняется.

Проблема заключается в том, что при обновлении контекста, по-видимому, существует задержка во времени, поэтому компонент не выполняет повторную визуализацию. Как сделать так, чтобы компонент повторно отображался после обновления значения контекста?

Ниже код, который я использую:

 const User = () => {    
     const {userinfo, setuserinfo} = useContext(Userinfo) //Declare useContext hooks
     useEffect(()=>{
         /*
          Compute the value of mid
         */         
         setuserinfo(mid);  //Set 'userinfo' using context API
     },[])

     return (
         <>
         {userinfo.map(ui =>
          //JSX to map userinfo to UI components
         )}
         </>
     )
}

Заранее большое спасибо!

Answer 1

Вы можете попробовать что-то вроде этого.

return  userinfo && Array.isArray(userinfo) && userinfo.length ? (
         <>
         {userinfo.map(ui =>
          //JSX to map userinfo to UI components
         )}
         </>
       ) : <span>Loading... (or whatever)</span>;

Answer 2

Вы можете проверить или подтвердить userinfo, прежде чем пытаться сопоставить его с визуализированными компонентами.

Например

// or use lodash.isNil, or lodash.isEmpty, or whatever check you want
const isNil = o => o === null || o === undefined; 

return ( isNil(userInfo) ?
  <span>Loading...</span> :
  <>
    {userinfo.map(ui =>
      //JSX to map userinfo to UI components
    )}
  </>
);