useState を使用して React Hooks の配列に要素を追加するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-02 14:53:02

オリジナル

315 人が閲覧しました

How do I add elements to an array in React Hooks using useState?

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 サイトの他の関連記事を参照してください。