在
React
中,我们可以使用useState
钩子来管理组件的状态,其中包括数组。如何在React
函数组件中对数组进行增加和删除项的操作?
新增项时:我们可以对原数组进行解构,并把新增项一起加入到新数组;
删除项时:我们使用Array.filter()
进行筛选删除指定项,以下是一个简单的例子。
// App.jsx
import React, { useState } from 'react'
const App = () => {
const [items, setItems] = useState([])
// 添加新项到数组
const addItem = (item) => {
setItems([...items, item])
}
// 删除指定索引的项
const removeItem = (index) => {
setItems(items.filter((x, i) => i !== index))
}
return (
<div>
<button onClick={() => addItem('员工')}>新增</button>
<ul>
{items.map((item, index) => (
<li key={index}>
{item}
<button onClick={() => removeItem(index)}>删除</button>
</li>
))}
</ul>
</div>
)
}
export default App
在这个例子中,App是一个React函数组件,它使用useState
钩子来维护一个名为 items
的状态变量,其初始值为空数组。addItem
函数用于向数组添加新项,而removeItem
函数则用于删除指定索引的项。这两个函数都会导致组件重新渲染,显示更新后的数组状态。