我正在使用 React 开发一个网络应用程序,这就是我想要做的:
- 在最高阶组件中,检查用户是否登录,如果登录,则更新 'userinfo' Context 值。
- 在 Profile.js 中,获取“userinfo”上下文值。
- 检查userinfo是否为null,并相应调用不同的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;
这里最好的解决方案是在上下文提供程序中添加加载状态,一旦值更新,该状态就会重置。
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) */
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)