axiosでデータを取得した後に関数を呼び出したい。

Question

ReactでAPIを使ったサイトを作っています。
axiosでid一覧を取得した後に、一覧の中から10件の情報をさらに取得するものを作りたいです。
そこで、idを指定してjsonを取得するプログラムを関数にしたいと思ってるのですが、コードのコメントからsetDataまでを関数に置き換えると下記のエラーが出てしまいます。

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0') at buttonClick

このエラーを回避するにはどうしたらいいのでしょうか。

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

function App({ itemsPerPage }) {
    const [idList, setId] = useState([]);
    const [data, setData] = useState([]);

    useEffect(async () => {
        const result = await axios(
                                   `idの一覧取得API`,
                                   );
        setId(result)
        
        //ここを無くしてbuttonClickの関数に置き換えたい
        let newsList = [];
        for(var i = 0; i < 10; i++) {
            const response = await axios(
                                         `idを指定してjson取得するAPI`,
                                         );
            newsList.push(response.data);
        }
        setData(newsList)


    }, []);
    
    const buttonClick = async () => {
        let newsList = [];
        for(var i = 0; i < 10; i++) {
            const response = await axios(
                                         `idを指定してjson取得するAPI`,
                                         );
            newsList.push(response.data);
        }
        setData(newsList);
    };

Answer 1

関数はどこに切り出しましたか？コンポーネントの外に出してしまうと、idList にアクセスできずに、エラーになっているのだと思います。

setData もすることを考えると、コンポーネント内に関数を配置するとよさそうです。