React の useState フックを使用して要素を状態配列にプッシュするにはどうすればよいですか?

React フックを使用した状態配列への要素のプッシュ (useState)

React useState フックは、機能コンポーネント内の状態を処理するメカニズムを提供します。 this.setState() を使用して状態を更新するクラス コンポーネントとは異なり、useState ではコンポーネントの状態を変更するための状態更新関数が導入されています。

要素を配列状態にプッシュする方法

useState を使用して要素を配列状態にプッシュするには、次の手順に従います。

1. useState フックを使用して配列で状態を初期化します。

   <code class="js">const [theArray, setTheArray] = useState([]);</code>

2. 配列の状態を変更できるようにする setTheArray という状態更新関数を作成します。

3. 要素を配列にプッシュするには、setTheArray を呼び出し、次の関数を渡します。更新された配列を返します。関数は引数として前の状態 (oldArray) を取る必要があります:

   <code class="js">setTheArray(oldArray => [...oldArray, newElement]);</code>

コールバック形式と非コールバック形式

Inほとんどの場合、状態内の配列を更新するときはコールバック フォームを使用することをお勧めします。これは、状態の更新が非同期であり、即時に実行されないためです。コールバック フォームを使用すると、配列の更新に常に最新バージョンの状態が使用されるようにできます。

ただし、場合によっては、非コールバック フォームを問題なく使用できる場合もあります。これは、クリック イベントなどの特定のユーザー イベントのハンドラー内でのみ配列の状態を更新する場合にのみ適用されます。

要素のプッシュの例

次の React を考えてみましょう。要素を配列状態にプッシュする例を示すコンポーネントの例:

<code class="js">const {useState} = React;

function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
    };
    
    return [
        <input type="button" onclick="{addEntryClick}" value="Add">,
        <div>
            {theArray.map(entry => <div>{entry}</div>)}
        </div>
    ];
}

ReactDOM.render(<example></example>, document.getElementById("root"));</code>

この例では、[追加] ボタンをクリックすると、addEntryClick ハンドラーがコールバック関数を使用して setTheArray を呼び出し、そのコールバック関数が新しい配列を返します。新しい要素が最後に追加されます。

React の useState フック内で Push メソッドを利用すると、内容の追加、削除、変更など、状態配列を効果的に管理して、より効率的で保守しやすいコードベースを実現できます。

以上がReact の useState フックを使用して要素を状態配列にプッシュするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。