在 React 中,我们可以使用 useState
钩子来创建一个包含动态值的数组,并使用 setArray
函数来更新数组的值。
下面是一个简单的例子,演示了如何往数组中添加新值:
import React, { useState } from 'react';
function App() {
const [array, setArray] = useState([]);
const addItem = () => {
// 创建一个新数组,将旧数组的值和新值合并
const newArray = [...array, '新值'];
setArray(newArray);
};
return (
<div>
<button onClick={addItem}>添加新值</button>
<ul>
{/* 遍历数组,渲染列表 */}
{array.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default App;
在上面的例子中,我们使用 useState
创建了一个名为 array
的数组状态,并初始化为空数组。然后,我们定义了一个 addItem
函数,该函数在按钮点击时被调用。addItem
函数首先创建一个新的数组 newArray
,通过将旧数组的值和新值进行合并。最后,我们使用 setArray
更新状态数组为 newArray
。
在组件的渲染中,我们使用 map
方法来遍历数组并渲染一个带有每个数组项的列表。key
属性需要设置为唯一值,这里我们使用 index
作为 key
,但在实际应用中最好使用一个唯一的 id
。
当按钮被点击时,addItem
函数会被调用,将新值添加到数组中,并通过重新渲染组件来更新视图。