useState を使用して React Hooks の配列に要素を追加するにはどうすればよいですか?

React フックで要素を配列にプッシュする (useState)

React フックで状態配列を扱う場合、従来の方法は適用できなくなりました。代わりに、useState は各状態項目の更新メソッドを提供します。

const [arrayState, setArrayState] = useState(initialState);

arrayState に新しい要素を追加するには、新しい配列または新しい配列を作成する関数のいずれかを使用して setArrayState を呼び出すことができます。通常は後者です。状態更新の非同期的な性質のため:

setArrayState(prevArray => [...prevArray, newElement]);

クリック イベントなどの特定の個別イベントでは、コールバックを省略できる場合があります:

setArrayState([...arrayState, newElement]);

実際の例は次のとおりです。コールバックの使用例:

<code class="javascript">import React, { useState, useCallback } from "react";

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

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

効率的な調整と最適なパフォーマンスを実現するために、React でリストをレンダリングするにはキー prop が不可欠であることを覚えておいてください。

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