在 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 (
      <button onClick={() => addItem('员工')}>新增</button>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(index)}>删除</button>
        ))}
    </div>
export default App
在这个例子中，App是一个React函数组件，它使用useState钩子来维护一个名为 items 的状态变量，其初始值为空数组。addItem函数用于向数组添加新项，而removeItem函数则用于删除指定索引的项。这两个函数都会导致组件重新渲染，显示更新后的数组状态。
 
                    在React中，我们可以使用useState钩子来管理组件的状态，其中包括数组。如何在React函数组件中对数组进行增加和删除项的操作？新增项时：我们可以对原数组进行解构，并把新增项一起加入到新数组；删除项时：我们使用 Array.filter() 进行筛选删除指定项。
				
理解并使用react的useState
1、为什么有了这个方法
useState()是专门用在函数组件中的，因为函数组件本来是没有状态的组件，而类组件中可以通过 this.state和this.setState来更新组件状态，于是 React 16.8 就新增useState这个特性，用来提升函数组件的性能。
函数组件
import React, { useState } from 'react';
function ChangeAge() {
  // 声明一个叫 "name" 的 state 变量
返回一个 state，以及更新 state 的函数。
在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。
setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。
setStat...
				
在react中使用useState无法改变视图，数据改变但是视图未改变
未渲染的代码如下：
const [needLists,setNeedLists]=useState([])
const pressDownEnter=(e)=>{
    if(e.keyCode===13){
      needLists.push({
        content:e.target.value,
        status:0
      setNeedLists(needLists)
				
使用 useState() 进行状态管理
useState()是改变状态的开关，将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。
import React, { useState } from 'react';  //1.启用状态
const [state, setstate] = useState(initialState);	//2.初始化状态
consloe.log(state); //3.读取
setstate(newState);	//4.更新状态
useState()使用回调更
				
在之前的版本中一般使用类组件this.setState修改数据更新视图，在最新的版本中，react推荐使用函数组件，函数组件里面是没有this的，所以需要使用Hook
import { Button } from "antd"
import { useState } from "react"
export default function Role() {
    const [list, setList] = useState([
            id: 1,
				
State Hook
State Hook是一个在函数组件中使用的函数, 该函数名字是useState, 用于在函数组件中提供状态
让React的函数组件能够像类组件一样拥有state
useState函数有一个参数,  这个参数的值表示状态的默认值
在我们引入react的时候顺带先引入一下stateHook
import React, { useState } from 'react';
us...
				
React useState 是 React 中的一个 Hook，它可以让你在函数组件中使用状态。可以通过使用 `useState` Hook 来声明状态和修改状态的函数。useState 的语法是：
const [state, setState] = useState(initialState)
其中 `state` 是当前状态的值，`setState` 是一个函数，用于修改状态的值。`initialState` 是状态的初始值。
使用 useState 的示例：
import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  return (
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
在这个示例中，`count` 是当前状态的值，`setCount` 是用于修改状态的函数。在 `handleClick` 函数中，我们通过调用 `setCount` 来修改 `count` 的值。每次点击按钮时，`count` 的值都会增加 1。