Question

我正在使用React开发一个Web应用程序，这是我正在尝试做的事情：

在最高顺序的组件中，检查用户是否已登录，如果已登录，请更新“ userinfo”上下文值。
在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;

Answer 1

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

object_type

Answer 2

我今天遇到这个问题，我喜欢Shubham的所作所为。但是，我解决该问题的方法只是从上一个组件中获取leaflet(dg) %>% addPolygons( fillColor = ~factpal(dg@data$X_2012_membership), stroke = TRUE, color = 'White', weight = 1.5, label = labs, labelOptions = labelOptions( noHide = T, style = list("font-weight" = "normal", padding = "2px 2px"), textsize = "7px", direction = "auto" ) )并将其传递给此配置文件组件。

但是，请确保渲染这样的userinfo组件，以确保Profile存在：

userinfo

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

2 个答案: