javascript - 多个组件的 useEffect、useState 和 useContext 的 React Hooks 生命周期是什么？

Question

TLDR：我的问题是：useState在上下文中没有及时重新渲染以useContext从另一个组件获取更新的状态值。

如果您不想阅读完整的说明，也非常感谢您对不同组件中的 3 个挂钩的简要说明。谢谢！

TokenProvider：上下文

TeeToken、AccessToken、IdToken 和 RefreshToken：查看显示上下文的组件

应用程序.js

<TokenProvider>
  <TeeToken />
  <AccessToken />
  <IdToken />
  <RefreshToken />
  ...
</TokenProvider>

TokenProvider.js

import React, { useState, useEffect } from 'react';
import TokenContext from '../shared/TokenContext';

const TokenProvider = ({ children }) => {
  const [teeToken, setTeeToken] = useState('');
  const [accessToken, setAccessToken] = useState('');
  const [idToken, setIdToken] = useState('');
  const [refreshToken, setRefreshToken] = useState('');
  const [tokens, setTokens] = useState('');
  // for data fetching logic
  const [responseData, setResponseData] = useState('');
  const [uniqueId, setUniqueId] = useState('');

  const loadToken = () => {
    const { oauth } = responseData;
    setUniqueId(responseData.reduxRequestId);
    setTeeToken(oauth.teeToken);
    setAccessToken({ decoded: jwt.decode(oauth.accessToken), encoded: oauth.accessToken });
    setIdToken({ decoded: jwt.decode(oauth.idToken), encoded: oauth.idToken });
    setRefreshToken(oauth.refreshToken);
  };

  if (responseData) {
    if (uniqueId !== responseData.reduxRequestId) {
      loadToken();
    }
  }

  useEffect(() => {
    setTokens({ teeToken, accessToken, idToken, refreshToken });
  }, [teeToken]);

  const context = {
    tokens,
    setResponseData,
  }
  return <TokenContext.Provider value={context}>{children}</TokenContext.Provider>;
};

export default TokenProvider;

为了这个问题，我省略了很多代码的获取部分，但重点是我用来useState从获取的数据中设置所有 TeeToken、AccessToken、IdToken 和 RefreshToken 常量值，并将它们都很好地放入令牌中。然后将令牌放入上下文中。

我使用令牌是useEffect因为放置useState令牌无法获得所有各种令牌的更新版本，因为这useState是一个异步操作。所以我正在等待组件重新渲染，然后令牌可以获取所有各种更新的值并再次重新渲染以更新上下文。

但是，使用的其他组件useContext获取令牌的未更新版本。请帮助我如何让其他组件获得令牌的更新版本！谢谢。

编辑：从技术上讲，我的问题可以通过将所有各种令牌传递到上下文而不是将其保存在令牌中来解决，但如果有人能给我解释 React Hooks 生命周期，我仍然会很感激

标签： javascriptreactjsreact-hooksreact-lifecycle