React props が渡せない

Question

React props が渡せない

以下の様なコンポーネントなのですが、
axios でオブジェクトを取得 -> stateに代入 -> state を props として子コンポーネントに渡す -> 子コンポーネントでそれを表示
という流れを期待していますが、子コンポーネントに渡すときに、正常に渡されていないようです。
chrome のコンソールには以下のエラーが吐かれています。
（Uncaught TypeError: Cannot read properties of undefined (reading 'id')）
axios でデータを受け取る前に子コンポーネントに渡しているから、上記のエラーが出ていると考えているのですが正しいでしょうか。
そうだとするなら、axios で受け取ってから渡すコードはどう書けばよいでしょうか？

【親コンポーネント】

import React from 'react';
import axios from 'axios';
import { Res } from './Res';

const url = 'https://api.example/test';
function Example() {
    const [res, setRes] = React.useState({});
    React.useLayoutEffect(() => {
        const fetchData = async () => {
            const response = await axios.get(url);
            setRes(response.data);
        };
        fetchData();
    }, []);
    console.log(res);
    return (
        <>
            <Res res01={ res.01 } res02={ res.02 } />
        </>
    );
}

【子コンポーネント】

import React from 'react';

export const Res = ({ res01, res02 }) => {
    return (
        <>
            <div>{ res01.id }</div>
            ...以下略...
        </>
    );
}

Answer 1

非同期のデータ取得はuseEffectを使うことをおすすめします。
私がするなら以下のようにデータ取得中はロード画面を表示します。

function Example() {
    const [res, setRes] = React.useState({});
    // React.useLayoutEffect(() => {
     React.useEffect(() => {
        const fetchData = async () => {
            const response = await axios.get(url);
            setRes(response.data);
        };
        fetchData();
    }, []);
    console.log(res);
    if(!res) return <div>loading...</div>
    return (
        <>
            <Res res01={ res.01 } res02={ res.02 } />
        </>
    );
}

Answer 2

axiosによるデータ取得は非同期である以上、最初の描画時には間に合いません。データなしの状態で子コンポーネントが描画されてしまいます。

Comments

[ryo_engineer]

ありがとうございます。
データを取得後に子コンポーネントに渡すにはどうすればよいでしょうか？

[maisumakun]

> そうだとするなら、axios で受け取ってから渡すコードはどう書けばよいでしょうか？

できません。「データがない状態が起きうることを想定して子コンポーネントを実装する」、もしくは「データがあるときだけ<Res>を描画する」形で対応してください。

[ryo_engineer]

React めっちゃ不便っすね。react というより非同期通信の性質上仕方ないのかもしれませんが、
うまくやってほしいですね

[maisumakun]

考え方が違うのかもしれません。

Reactは、（SuspendやTransitionなど最近加わった部分は別として）「このデータがあればこの形で描画する」という「宣言型」の考えをベースに動いています。「これをやってこれを動かす」という「手続き型」とは頭を切り替える必要があります。