使用 useEffect 在页面加载时从上下文中获取数据

Posted 2023-04-14

【中文标题】使用 useEffect 在页面加载时从上下文中获取数据

【英文标题】：using useEffect to grab data from context on page load

【发布时间】：2020-11-03 14:30:37

【问题描述】：

我需要帮助来解决这个问题。我有一个令牌存储在上下文globalContext 中。我想在页面加载时获取该令牌并使用它发出请求。但在我看来，当我尝试使用带有 [] 依赖项的 useEffect 挂钩来获取它并尝试将其记录到控制台时，它会显示一个像这样记录的空行

如果我删除挂钩上的依赖项[]。它记录同一行 3-4 秒，然后它开始按应有的方式记录令牌。您认为这里的问题是什么？

GlobalContext

const GlobalContextProvider = (props) => 
  const [globalState, setGlobalState] = useState(
    userType: "", //Organisation or Changemaker
    showModal: false,
    modalContent: "", //profile, editprofile, studentlisting, orglisting, createlisting
    access_token: "",
    isSigningUp: false,
  );

  const [profile, setProfile] = useState();

  const updateGlobalState = (key, val) => 
    setGlobalState((prevState) => (
      ...prevState,
      [key]: val,
    ));
  ;

  return (
    <GlobalContext.Provider
      value= globalState, updateGlobalState, profile, setProfile 
    >
      props.children
    </GlobalContext.Provider>
  );
;

useEffect hook

  useEffect(() => 
    
    console.log(globalState.access_token);
  , []);

【问题讨论】：

能分享一下globalContext和useEffect的代码吗？不看代码很难理解可能出错的地方。

@jacobedawson 我已经编辑了帖子。请检查

【参考方案1】：

您需要添加globalState.access_token 作为useEffect 回调的依赖项。示例：

useEffect(() => 
  console.log(globalState.access_token);
, [globalState.access_token])

请注意，每次globalState.access_token 的值发生变化时都会触发此函数。

【讨论】：

是的，这行得通，但为什么它第一次运行时会记录一个空输出。

@KautilyaKondragunta 因为access_token 的初始值设置为空字符串。

哦，所以它在 access_token 设置之前运行。知道了。谢谢！