reactで一覧ページの初期値を呼び出し保存するまでをまとめました。

処理の流れ
①useEffectを使用してページ遷移した最初に一覧データ取得のAPIを呼び出す。
②呼び出したデータをuseState(一覧データを保管する)に格納する。

また今回APIの返却データが文字列形式なので、
文字列をJSON型に変換する記述もしております。

//一覧データ
    const [posts, setPosts] = useState([])

    初期表示データ取得処理
    useEffect(() => {
        let ignore = false

        fetch('APIのURlを記述')
            .then((res) => res.json())
            .then((data) => {
                if (!ignore) {
                    let posts_arr = [];
                    //取得したデータが文字列なのでJSON型に変換
                    posts_arr = JSON.parse(data);
                    //Stateに格納
                    setPosts(posts_arr.data);
                }
            })
        return () => {
            ignore = true
        }

    }, [])