ReactにてContextが複数回呼び出される

Question

#概要
下記のようにコンテキストを定義し、子コンポーネントからコンテキストを呼び出すようにしています。

コンテキストを呼び出す際、2回呼び出されます。

• 1回目は、初期値のデータ。
• 2回目は、データが挿入された後のデータ

実際のコード

interface ContextProps {
  login:boolean,
  username:string
}

export const LoginContext = React.createContext<any>([
  {login: false,username: ''} as ContextProps,
  () => {},
]);

export default function LoginContextProvider(props:any){
  const [state, setAuth] = React.useState({
    login: false,username: ''
  })
  React.useEffect(()=>{
      const userInfo = userPool.getCurrentUser();
      console.log('実行')
      if(userInfo){
        // @ts-ignore
        setAuth({login: true, username: userInfo.username})
      }else{
          setAuth({login: false, username: ''})
    }
  },[])
  // console.log('現在のコンテキストは',state)
  return(
    <LoginContext.Provider value={[state, setAuth]}>
      {props.children}
    </LoginContext.Provider>
  )
}

質問

子コンポーネントから1回目のコンテキスト呼び出しで、すでにデータが入っているようにするには、どのようにすれば良いでしょうか？

Answer 1

useStateの初期値設定で行いましょう。

  const [state, setAuth] = React.useState(()=>{
      const userInfo = userPool.getCurrentUser();
      console.log('実行')
      if(userInfo){
        // @ts-ignore
        return {login: true, username: userInfo.username}
      }else{
        return {login: false, username: ''}
    }
  })

Comments

[yuki_90453]

いつもありがとうございます。
初期値に関数を入れる方法気づきませんでした、勉強になりました。
ありがとうございます。