溫馨提示×

react如何動態往數組添加值

小億
372
2024-01-19 17:17:05
欄目: 編程語言

在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方法來遍歷items數組,并在每個項上添加一個

  • 元素。需要注意的是,我們在每個
  • 元素上使用了一個唯一的key屬性,以便React能夠正確地識別每個元素的更新。

  • 0
    亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女