React useEffect周りでエラーが発生

Question

前提・実現したいこと

【実現したいこと】
apiで取得したデータを最初のマウント時に表示したい。

発生している問題・エラーメッセージ

【発生している問題】
{monster.name}を削除して実行して開発者ツールを開くと確かにデータは取得できていて、その状態で{monster.name}を記載すると表示がされた。

おそらくuseEffectが実行される前にJSXの部分を表示しようとしてまだデータがないためエラーが出てるのではないか？？

原因、解決方法わかる方いましたらご回答の方よろしくお願いいたします。

【エラーメッセージ】
TypeError: Cannot read property 'name' of undefined

    const [monster,setState] = useState();

    const getMonster = async () => {
        await axios.get(`https://pokeapi.co/api/v2/pokemon-form/${id}`)
        .then(response => {
        setState(response.data);
        })
    }

    useEffect(() => {
        getMonster()
    },[]);
    return(
        <Grid>
            <Card className={classes.root}>
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                    />
                    <CardContent>
                        <Typography gutterBottom variant="h5" component="h2">
                            {monster.name}
                        </Typography>
                    </CardContent>
                </CardActionArea>
            </Card>
        </Grid>
    )

Answer 1

おそらくuseEffectが実行される前にJSXの部分を表示しようとしてまだデータがないためエラーが出てるのではないか？？

axios.getは非同期での実行なので、最初の表示に結果を間に合わせることは（同じコンポーネントの枠内では）不可能です。

「最初はデータが存在しない」ことを前提にコンポーネントを組む必要があります。

Comments

[sasa_design]

回答ありがとうございます!
他の記事でこのような方法でAPIを取得するとかいてあったのですが、同じコンポーネント枠内では不可能とはどういうことでしょうか？？

[maisumakun]

取得はできます。ただし、データが取れるのは必ず「初期表示より後」のタイミングになります。

「最初のマウント時に表示」が不可能なのです。

[sasa_design]

丁寧な対応ありがとうございます！
理解できました！