在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能夠正確地識別每個元素的更新。