Question

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

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

TokenProvider：上下文

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

App.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生命周期的解释，我还是会很感激的

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

0 个答案: