reactで配列に値を動的に追加する方法は何ですか。

1年 ago
夏樹, 風
1 minute

Reactでは、setStateメソッドを使用して配列に値を動的に追加することができます。以下は例です：

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems(prevItems => [...prevItems, 'new item']);
  };

  return (
    <div>
      <button onClick={addItem}>添加项</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

上記の例では、最初にuseStateフックを使用して、itemsという名前の配列とsetItemsという関数を作成しました。次に、addItemという関数を定義し、この関数はsetItemsを使用してitems配列の状態を更新します。スプレッド演算子を使用して、新しい項目を以前の項目配列に追加します。

最後に、items.mapメソッドを使用して、アイテム配列を反復処理し、各アイテムに追加します。

  • 元素について。注意すべき点は、私たちがそれぞれの要素についている
  • Reactは各要素の更新を正しく識別するために、要素に唯一のキー属性を使用しました。
bannerAds