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

React で useState を使用して要素を配列にプッシュする

React で useState フックを使用する場合、その update を呼び出すことで状態配列を変更できます方法。このメソッドは、次のような状態項目を初期化するときに提供されます。

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

配列に新しい要素を追加するには、更新された配列、または新しい配列を生成する関数を setTheArray メソッドに渡します。 React の状態更新は非同期であり、バッチで発生する可能性があるため、後者が通常使用されます。

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

または、特定のユーザー イベント (クリックなど) のハンドラー内でのみ更新を行う場合は、このショートカット構文で十分な場合があります。 、マウスの動きは除く):

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

React でフラッシュのレンダリングをトリガーするイベントは、「個別イベント」として知られています。

実際の例:

<code class="js">const { useState, useCallback } = 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 />,
  document.getElementById("root")
);</code>

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