React Hooks:在上下文 API 中存储的值发生变化后渲染组件?

Question

我正在 React 中开发一个 Web 应用程序。我正在尝试执行以下操作：

1. 从数据库中获取用户信息并使用上下文 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

在尝试将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
)}
</>
);

Answer 2

你可以尝试这样的事情。

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