[React]ループの中でaxiosを利用して配列に追加していきたい

Question

前提

Reactでaxiosを利用して外部のAPIより指定のスキーマの情報を取得する実装をしています。
具体的な実装は以下になります。

// 該当するスキーマの情報が入っている配列　=> schemas
// この中のnameをmapで取得し、axiosのurlにループで代入していく想定

　const [schemaData, setSchemaData] = useState([])

  useEffect(() => {
    if (schemas.length > 0) {
      schemas.map(schema => {
        client.get('/api/resource/' + schema.name).then(response => {
          const result = response.data
          const getData = result.rows
          setSchemaData(...schemaData, getData)
        })
      })
    }
  }, [])

発生しているエラー

上記の実装では、最後に取得したスキーマのオブジェクトしか格納できていない。
上書きされてしまっている。

実現したいこと

ループ処理で取得したデータを全てschemaDataに格納できるようにしたいが実装方法が分からず質問いたしました。

Answer 1

setSchemaData の引数に、値を更新する関数を渡すと良いでしょう。
(schemaData と getData のデータ構造によっては、getData の前にも ... が必要かも？)

          setSchemaData(schemaData => [...schemaData, getData])

setSchemaData に値を直接指定するとうまくいかない理由ですが、axios の呼び出しは初回表示時にまとめて行われますが、その時点での schemaData の値 [] が使われてしまうからです。
参考: React Hooks 勉強 useState useEffect - Qiita

Comments

[shimokitan]

有難うございます！やりたいことが実現できました。
参考記事につきましても有難うございます。参考にさせていただきます。