在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能够正确地识别每个元素的更新。