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

Question

我需要帮助弄清楚这一点。我有一个令牌，该令牌存储在上下文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);
  }, []);

Answer 1

您需要添加globalState.access_token作为useEffect回调的依存关系。示例：

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

请注意，globalState.access_token的值每次更改都会触发此功能。