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