子コンポーネントの再読み込みがかからない

目的

• 親コンポーネントと子コンポーネントがある。
• 親コンポーネントはデータアクセスがある
• 親コンポーネントのデータアクセス結果を子コンポーネントに伝え、それに合う表示をさせたい

環境

• react@17.0.2

問題と解決方法

実現したいこと

• 親コンポーネントで読み込んだデータを、子コンポーネントにpropで渡し（uid等）
• 子コンポーネント（ProfileComp） は、propの値を元にデータを検索し表示を行いたい

import React, {useState, useEffect} from "react";

// UIDを持たせるstate
const [illustUid, setIllustUid] = useState(0);

const Sample = (props) => {
  useEffect((props) => {
    loadData(params);
  },[]);

// 初期表示データの読み込み処理
  const loadData = (props) => {
    <<Firebaseからデータ取得>>.then((data) => { 
      // ここで
      console.log(item.id)
      setIllustUid(item.id);
    })
  }

  
  return (

    <Box>
      <ProfileComp uid={illustUid}/>  <= このコンポーネントが正しく表示されない
    </Box>
  );
}
  export default Sample;

問題

• しかし、子コンポーネント <ProfileComp > は、親コンポーネントのデータ読み込みが完了を待たずに描画がされる
• 親コンポーネントが illustUid を取得完了する前に、　<ProfileComp>の描画がされてしまうため、アイコンなど子コンポーネントの内容が正しく表示されなくなっている

→アイコンのところに本当はpropで受け取ったuidを元に取得した画像を表示したいが、初期表示時はuidが得られるより先に描画されてしまい、 <ProfileComp uid={null}> の状態で表示されてしまっている。useEffectで実行される loadData　の読み込み処理完了後に、データが入ってから再描画したい

解決方法

• state illustUid　の内容に応じて子コンポーネントの描画を切り替える
• 親コンポーネントの読み込みが完了し、illustUid に値がセットされたら、子コンポーネントを表示する次のような式にする
• {illustUid&& <ProfileComp uid={illustUid}/>}
• illustUidにデータが入ると<ProfileComp uid={illustUid}/> の再描画が走り、子コンポーネントが正しいデータで表示される

import React, {useState, useEffect} from "react";

// UIDを持たせるstate
const [illustUid, setIllustUid] = useState(0);

const Sample = (props) => {
  useEffect((props) => {
    loadData(params);
  },[]);

// 初期表示データの読み込み処理
  const loadData = (props) => {
    <<Firebaseからデータ取得>>.then((data) => { 
      // ここで
      console.log(item.id)
      setIllustUid(item.id);
    })
  }

  
  return (

    <Box>
      {illustUid&& <ProfileComp uid={illustUid}/>}　＜＝　修正箇所
    </Box>
  );
}
  export default Sample;