反应组件不刷新 state 上的内容更改 [Next.js]

Question

So i have the problem that my Header component is not changing content on state change. I want to display user Profile when state changes, but unfortunately it doesn't change content immediately, but it does after page refresh/route.push to other page.

Here is the function i fetch data with. It triggers when URL query have code param to finish auth flow and then fetch data, or when access token is already in local storage then it just fetches data.

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);
    ...
  }

Then i have condition in function component return :

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

I tried using useEffect() , i tried setTimeout but it didn't work. I think it have something to do with client/server side rendering. What can i do to fetch this data before component render and display it?

Answer 1

you can use 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);
    } 
  }
},[])

It will automatically work when your jsx is load.