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

【问题标题】：using useEffect to grab data from context on page load使用 useEffect 在页面加载时从上下文中获取数据
【发布时间】：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 我已经编辑了帖子。请检查

标签： reactjs react-hooks use-effect react-context

【解决方案1】：

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

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

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

【讨论】：

是的，这行得通，但为什么它第一次运行时会记录一个空输出。
@KautilyaKondragunta 因为access_token 的初始值设置为空字符串。
哦，所以它在 access_token 设置之前运行。知道了。谢谢！