APIからデータを取得する流れ

取得したデータを配列に格納する(React)

const function = () => {
    const [state, setState] = useState([]);

    useEffect( () => {
        const fetchApi = async () => {
            const res = await fetch('URL'); //①
            const data = await res.json(); //②
            const arr = Object.keys(data); //③
            setState(arr);
        }

        fetchApi();
        
    }, []);

流れをres,data,arrの3段階に分けて考える

①APIからPromise オブジェクトが返される
②JavaScriptのオブジェクトとして扱うためJSON形式(文字列)→JavaScriptオブジェクトに変換
③オブジェクト→配列に格納


この記事が気に入ったらサポートをしてみませんか?