React Hooksで useState内にデータが入らないとき

Question

  const [userData, setUserData] = useState();


1  const AddUserData =  () => {
2    const replyPersonType = personal_info.personType;
3      const userInfo = guestInformations.find(doc => doc.id === personal_info.userId);
4      console.log(userInfo);
5      setUserData(userInfo);
6      console.log(userData)
7  };
8  useEffect(() => {
9    AddUserData();
10    console.log(userData)
11  }, []);

React　Hooksレンダリングされる際に userInfoをstate内に入れる処理をしたいのですが

実行結果が

4 　[object]
6 　undefined
10　undefined

と変数内ではデータが取れているのに　stateに入れた際におかしい挙動になってしまいます。

Answer 1

こんにちは

以下は、公式ドキュメントから引用した、useEffectの説明です。

useEffect は毎回のレンダー後に呼ばれるのか？ その通りです！ デフォルトでは、副作用関数は初回のレンダー時および毎回の更新時に呼び出されます。あとでカスタマイズする方法について説明します。「マウント」と「更新」という観点で考えるのではなく、「レンダーの後」に副作用は起こる、というように考える方が簡単かもしれません。React は、副作用が実行される時点では DOM が正しく更新され終わっていることを保証します。

上記により、 一回目のuseEffect は初回のレンダーの後に呼ばれます。従って、初回のレンダーが行われる時点では、ご質問のコードにある userData は、useState() に引数を与えていないので、undefinedになります。初回のレンダーの後、useEffectが呼ばれて、AddUserData() が呼ばれ、setUserData() が呼ばれて、２回目のレンダー時では、userData に値が入っています。

以下は、ご質問にあるコードに多少修正を加えて、２回目のレンダー時には userData に値が入っていることを確認するサンプルコードです。

// dummy data
const guestInformations = [
  { id: 1, name: 'foo' }, 
  { id: 2, name: 'bar' }, 
  { id: 3, name: 'baz'}
];
const personal_info = { userId: 2 };

// redering counter
let counter = 0;

const App = () => {
  const [userData, setUserData] = useState();
  
  const AddUserData =  () => {
    const userInfo = guestInformations.find(doc => doc.id === personal_info.userId);
    setUserData(userInfo);
  }
  
  useEffect(() => {
    AddUserData();
  }, []);

  console.log(`render#${++counter}: ${JSON.stringify(userData)}`)
  
  return (<div>{JSON.stringify(userData)}</div>);
}

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/KKKYYwY?editors=1011

Console に

render#1: undefined
render#2: {'id':2,'name':'bar'}

と出力されるのが分かると思います。

上記のような挙動ではなく、初回のレンダー時から、有効な値の入った userData を useState() から返させたいということであれば、useState()の引数として初期値を指定すればよいので、たとえば、以下のようにすればよいかと思います。

  const userInfo = guestInformations.find(doc => doc.id === personal_info.userId);
  const [userData, setUserData] = useState(userInfo);

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/QWWPPdR?editors=1011

上記のコードでは、 useEffectおよび setUserData を使っていないので、２回目のレンダーは発生せず、１回目のレンダー時から、userData にはundefinedではない値が入っていることを確認できます。

以上、参考になれば幸いです。