useStateの初期値を空配列にした後スプレッド構文を使うとエラーが出る

Question

実現したいこと

useState()で配列を状態管理したい

例

[
 { 
   foo: "foo",
   hoge: "hoge"
 }
]

のようなオブジェクトの配列の末尾にsetStateで追加していきたい

起こっていること

const [data, setData] = useState([]);

setData(...data, {何かしらのデータ});

のようにイベントリスナーにsetData()を記述したいのですが
setData()のところで
data is not iterable というエラーがでます

Answer 1

setDataには配列を渡す必要があるので

setData([...data, {何かしらのデータ}]);

これが正しいと思います。

追記

useState([])で受け取ったdataという変数の型がObject型になってる

コメントで上記の指摘をいただいたのですが、
同じような処理をするコードを書いたところuseStateで受け取るdataは配列のようでした(setData([...data, ...sample])が正常動作しているため)。

import { useState } from 'react';

// 追加されるであろう想定のデータ
const sample = [
  { 
    foo: "foo",
    hoge: "hoge"
  }
]

const Sample = () => {
  const [data, setData] = useState([]);
  return (
    <div className="App">
      <p>{data.length}</p>
      <button onClick={() => {
        setData([...data, ...sample])
      }}>
        data追加
      </button>
    </div>
  );
}

export default Sample;

その上でなのですが、setData以外でdataが破損してしまうような処理を挟んでないでしょうか？

Comments

[butsuli_shine]

すみません、こちらのコードを[]を忘れていました。

```
setData([...data, {データ}]);
```

でやってみたのですがダメでした

[nekoniki]

上記の場合でも同じエラーが出ますか？
その場合`{データ}`としている箇所の具体的な中身が知りたいです。

[butsuli_shine]

同じエラーですね
is not iterableなので
typeof()で見てみたところusestateで初期値を[]にしてもObject型になっていました.
データの中身は RESAS API の 人口構成の情報で
https://opendata.resas-portal.go.jp/docs/api/v1/population/composition/perYear.html
のsampleのところの
[{
"year": 1980,
"value": 12817
}, {
"year": 1985,
"value": 12707
}, {
"year": 1990,
"value": 12571
}, {
"year": 1995,
"value": 12602
}, {
"year": 2000,
"value": 12199
}, {
"year": 2005,
"value": 11518
}, {
"year": 2010,
"value": 10888
}, {
"year": 2015,
"value": 10133
}, {
"year": 2020,
"value": 9275
}, {
"year": 2025,
"value": 8431
}, {
"year": 2030,
"value": 7610
}, {
"year": 2035,
"value": 6816
}, {
"year": 2040,
"value": 6048
}, {
"year": 2045,
"value": 5324
}]

これですね

[nekoniki]

ということは
setData([...data, {データ}]);
にある`{データ}`はオブジェクトではなくオブジェクトの配列ということですよね。
であれば、
setData([...data, ...データ]);
でどうでしょうか？

[butsuli_shine]

それでやってみたのですが同じエラーです...
私の予想なのですが
useState([])で受け取ったdataという変数の型がObject型になってるんですよね
本来Array型になるはずなんですけど
Object型にはスプレッド構文が使えないのでそれが原因ではないですかね

[nekoniki]

上記コメントを受けて回答に追記しました。
途中でdataがオブジェクトに変わっていない限り、useStateで受け取ったdataは配列として扱えていると思いますが、そもそも追記のコードのような処理を行っているという認識で合ってますでしょうか？

[butsuli_shine]

上記のような処理を書いていました。
APIから受け取ったデータをtypeof()で見てみたのですが
配列にもかかわらずobjectと表示されました。
破損する処理はやってないと思いますがApp.jsで状態管理をしてそれを子コンポーネントにpropsで渡してるくらいですかね

[butsuli_shine]

一応githubにコードを挙げたのでお時間があれば見ていただけたら幸いです.
https://github.com/cheichey/code-test-intern

[nekoniki]

APIキーを取得して、2点修正したところエラーがなくなりました。
どちらもApp.jsでRadioButtonsを呼び出すところで
①setPopulationDataのタイポ(setPupulationDataとなっていました)を修正
②populationDataの渡し方を修正
→populationData={{populationData}}ではなくpopulationData={populationData}

これで意図した挙動になっているか不明なのでご確認ください。

[butsuli_shine]

本当にありがとうございます。
感謝してもしきれません。
確認してみます。

[butsuli_shine]

試してみたところ、うまくいきました...
タイポのミスくらい自分で気づけよって感じですよね。
本当にご迷惑をおかけしました。
ありがとうございました。