反應組件不刷新 state 上的內容更改 [Next.js]

Question

所以我的問題是我的 Header 組件沒有更改 state 更改的內容。 我想在 state 更改時顯示用戶Profile ，但不幸的是它不會立即更改內容，但它會在頁面刷新/route.push 到其他頁面之后發生。

這是我用來獲取數據的 function。 它在 URL 查詢具有code參數以完成身份驗證流程然后獲取數據時觸發，或者當訪問令牌已經在本地存儲中時它只是獲取數據。

export default function Header(props) {
const userProfile = async() => { 
    if (query.code && !userId) { 
      await handleAuthuser();
      const { profile, balance, userStatus } = await getUserData();
      setMoneyButtonData(profile, balance, userStatus);
    }

    if (storage.getItem('mb_js_client:oauth_access_token') && !userId) {
      const { profile, balance, userStatus } = await getUserData();
      setMoneyButtonData(profile, balance, userStatus);
    } 
  }
  userProfile();

function setMoneyButtonData(_profile, _balance, _userStatus) {
    setUserId(_profile.id);
    ...
  }

然后我在 function 組件return條件：

<a>
 {!userId ? <LoginDialog /> :
  <Profile name={userName} userId={userId} primaryPaymail={userPrimaryPaymail} userEmail={userEmail} userAvatar={userAvatarUrl} userAmount={userAmount} userCurrency={userCurrency} userStatus={userStatus}/> }
</a>

我嘗試使用useEffect() ，我嘗試了setTimeout但它沒有用。 我認為這與客戶端/服務器端渲染有關。 在組件渲染和顯示之前我能做些什么來獲取這些數據？

Answer 1

你可以使用反應鈎useEffect

  useEffect( async()=>{

    if (query.code && !userId) { 
       await handleAuthuser();
       const { profile, balance, userStatus } = await getUserData();
       setMoneyButtonData(profile, balance, userStatus);
    }

    if (storage.getItem('mb_js_client:oauth_access_token') && !userId) {
        const { profile, balance, userStatus } = await getUserData();
        setMoneyButtonData(profile, balance, userStatus);
    } 
  }
},[])

當你的 jsx 加載時，它會自動工作。