React はエラー TypeError を報告します。未定義のプロパティ 'XX' を読み取ることができない、問題は解決されました。

react tread recordを使用したプロジェクト開発において
まず、状況について。
バックエンドからインターフェイスを使ってデータを要求された

const [data, setData] = useState({});
const loadClueBase = async() => {
    let res = await loadClueBaseInfo();
    setData(res);
    console.log(res);
  };
  useEffect(() => {
    loadClueBase();
  }, []);

usestateを使用してデータに格納される
子コンポーネントに渡したい

<DetailPage3 clueInfo={data.clueRecordList}

次に、子コンポーネントはpropsを使用して

<Descriptions.Item span={3} label="shopName">{this.props.clueInfo.shopName}</Descriptions.Item>

今回は、shopNameが未定義であることを意味するエラーが報告されます。
原因分析
データリクエストは非同期で、ページのレンダリングは最初に行われるため、システムがデータを取得する前にページがレンダリングされ、この時点ではまだ res は空、つまり data は空なので、当然 data の下の shopName は未定義になります。

解決方法
データが必要なので、条件付きレンダリングを使用して、データが取得された後にページをレンダリングするようにします。

{data.clueInfo && <DetailPage3 clueInfo={data.clueRecordList} />}

条件判断文の使用
data.clueInfoが空、つまりfalseのときはページをレンダリングせず、データがあるとき、data.clueInfoがtrueならページをレンダリングしてデータを読み取り、正しいページを表示します。

この時点で、私は

<Descriptions.Item span={3} label="shopName">{this.props.clueInfo.shopName}</Descriptions.Item>

ページが正しく表示されます