反应组件不刷新 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 加载时，它会自动工作。