React の状態配列にデータをプッシュする

React は、開発者が動的でインタラクティブなアプリケーションをコード効率よく構築できる自由を提供するため、最も人気のあるフロントエンド ライブラリです。 このフレームワークには多くの優れた機能があります。

この記事では、React で動的機能を実装するために不可欠な state オブジェクトに焦点を当てます。 より具体的には、React で state を維持および更新する方法を示します。

React の状態配列にデータをプッシュする

多くの JavaScript 開発者は、.push() メソッドを使用して項目を配列の最後に追加します。 これはプレーンな JavaScript では問題なく機能しますが、配列が状態変数 (または state オブジェクトのプロパティ) である場合、.push() メソッドを使用すると予期しない結果が生じる可能性があります。

.push() メソッドを使用する場合、副作用と戻り値の違いを理解する必要があります。 更新された配列ではなく、更新された配列の長さを返し、新しい項目が最後に追加されます。

アイテムを配列にプッシュすることは、単なる副作用です。

それだけでなく、React には state オブジェクトを直接変更することに対する厳格な規則があります。 したがって、配列値を含む state プロパティに項目を直接プッシュすることはできません。

React で state オブジェクトを更新するには、setState() メソッドを使用して、更新された state を引数として指定する必要があります。

1つの state 変数を直接更新する関数を提供する useState() フックを使用することもできます。

例を見てみましょう：

import "./styles.css";
import { useState } from "react";
export default function App() {
  let [arr, setArr] = useState([1, 2, 3, 4]);
  // arr.push(5) wrong
  const numberToBeAdded = 5
  console.log(numberToBeAdded);

  return (
    <div className="App">
      <button onClick={() => setArr((arr) => [...arr, numberToBeAdded])}>Expand array</button>
    </div>
  );
}

実際の例 をご覧ください。 コンソールを開いて、状態値の変更を確認します。

useState() フックを使用して arr 状態変数を定義し、setArr 関数を使用してその変数を更新しました。 useState() フックに 1つの引数 (配列の初期値) を指定しました。

React では、.push() メソッドを使用して arr 状態変数を直接変更することはできません。 整数値 5 を配列に追加したい場合、arr.push() は正しい方法ではありません。

代わりに、項目を配列に追加する最良の方法は、1つの引数 (古い状態変数) を取り、新しい状態変数を返す関数を使用することです。

ハンドラー関数は次のとおりです。

() => setArr((arr) => [...arr, numberToBeAdded])

ご覧のとおり、setArr() 関数への引数は、arr 状態変数の現在の値を受け取り、新しい値を返すコールバック関数です。

配列の末尾に数値を追加するために、3つのドットとも呼ばれるスプレッド演算子を使用しました。 ...arr は現在の配列からすべての値を取得し、numberToBeAdded 変数に含まれる値を追加します。

同じアプローチを使用して、最初に価値を追加できます。

() => setArr((arr) => [numberToBeAdded, ...arr])

追加する必要がある値を前に移動するだけです。