React 组件在状态更改时不刷新内容 [Next.js]

Question

所以我的问题是我的 Header 组件没有在状态更改时更改内容。我想在状态更改时显示用户Profile，但不幸的是它不会立即更改内容，而是在页面刷新/route.push 到其他页面之后。

这是我用来获取数据的函数。当 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);
    ...
  }

然后我在函数组件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

你可以使用 react hook 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 加载时它会自动工作。