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

React フック (useState) での Push の使用

React の useState フックを使用する場合、set 関数を使用して配列状態項目を変更できます。提供します。これは、状態オブジェクト全体を一度に変更する setState を使用する古いアプローチとは対照的です。

要素を配列にプッシュするには、新しい配列、または新しい配列を構築するコールバックをset function.

コールバック フォーム (推奨)

発生する可能性のある非同期更新やバッチ処理を React が処理することが保証されるため、このメソッドが推奨されます。

<code class="javascript">const [theArray, setTheArray] = useState(initialArray);
setTheArray(oldArray => [...oldArray, newElement]);</code>

非コールバック フォーム (個別イベントのみ)

「個別イベント」に応答して配列を排他的に更新する特定のケースでは、オプトアウトできます。コールバック形式の:

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

離散イベント

React がレンダリングのフラッシュを保証する離散イベントは次のとおりです:

• onClick
• onDoubleClick
• onDragStart
• onDragEnd
• onTouchStart
• onTouchEnd
• onContextMenu
• onFocus
• onBlur

例

次の例は、useState でのプッシュ メソッドを示しています。

<code class="javascript">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>

プッシュを利用することでuseState のメソッドを使用すると、React コンポーネントの配列を簡単に更新できるため、データ フローがスムーズかつ効率的になります。

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