在页面加载时使用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的值改变时触发。