在
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
函数则用于删除指定索引的项。这两个函数都会导致组件重新渲染,显示更新后的数组状态。