[React] 配列stateに値を追加できない

Question

前提・実現したいこと

Reactで配列stateの更新ができません。
更新する時はpushなど使わずスプレッド構文を使っています。

該当のソースコード

具体的には以下のようなソースです。
現状onClickによってaddItem呼び出しはできていますがItemListにItemが追加されない状況です。エラー表示もされません

function Home() {
  const [ItemList, addItemList] = useState(
    [Item(1)]
  );

  function Item(keyI) {
    return (
      <div key={keyI} onClick={addItem}>a{keyI}</div>
    );
  }

  function addItem() {
    const i = ItemList.length + 1;
    const newItemList = [
      ...ItemList,
      Item(i),
    ]
    addItemList(newItemLIst);
  }

  return (
    <>{ItemList}</>;
  )
}

export default Home;

試したこと

• 別でボタンを配置してonClickにaddItemを設定。ボタンクリックで正常に追加されることは確認しました

質問事項

• Reactで上記のようなプログラムは可能でしょうか。自分自身をクリックして自分自身を増やしていくイメージ

Answer 1

addItem内のItemListが、別なタイミングでのものを束縛してしまって正しく動かない、という状況ではないでしょうか。

このような、「既存の値から次の値を作る」変更を行う場合、setStateに関数を渡しましょう。

  function addItem() {
    addItemList(ItemList => {
      const i = ItemList.length + 1;
      return [
        ...ItemList,
        Item(i),
      ];
    });
  }

Comments

[tontonton123]

回答ありがとうございます。教えていただいた内容で無事解決しました！