React useState数组新增和删除项

本文主要是介绍React useState数组新增和删除项，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

这篇关于React useState数组新增和删除项的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---