[React Hooks]apiで取得したjsonの扱い方がわからない

Question

前提・実現したいこと

Reactのaxiosを使ってAPIを叩いてjsonデータを取得し、nameのvalueのみ取り出して配列に格納するところをやっています。
jsonデータは取得できたのですが、以下のfor文が実行されません。
何が原因でしょうか。
また、他にいいやり方はありますか。

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

jsonで取得したデータの中からnameだけ取り出して配列にしたいのですが、pushしても入ってくれません。

該当のソースコード

hogeの中身

{
      "id": 1,
      "name": "山田太郎"
    },
    {
      "id": 2,
      "name": "山田花子"
    }

useEffect(async () => {
    await axios
      .get('http://localhost:3000/hoge')
      .then((result) => {
        //このfor文が実行されない？
        for (let i = 0; i < result.length; i++){
          console.log(result.data[i].name);
          const temp = result.data[i];
          console.log(temp["name"]);
          persons.push(result.data[i].name);
        }
        const data = result.data[0];
        console.log(persons); //personsに値が入っていない
        console.log(data.name); //名前を取得できた
      });
  });

Answer 1

こんにちは
forのループ条件で、data が抜けているのではと思われます。以下のように修正するといかがでしょうか？

- for (let i = 0; i < result.length; i++){
+ for (let i = 0; i < result.data.length; i++){