React中使用useState Hook修改、添加或删除数组指定行数据的方法

对React数组类型的状态做增删改操作时，都需要遵循不可变更新原则，即不直接修改原状态数组/对象，而是生成全新的数组/对象后传入状态setter触发更新，以下是三个需求的具体实现：

1、点击对应行按钮删除该行 #

实现思路是通过filter方法过滤掉待删除id对应的数据项，生成新数组更新状态：

// 新增删除方法
const deleteRow = (id) => {
  setbioData(prev => prev.filter(item => item.id !== id))
}

修改列表渲染部分的按钮绑定，传入当前行的id：

<button onClick={() => deleteRow(arr.id)}>删除该行</button>

2、修改指定行的特定属性值 #

实现思路是通过map遍历数组，匹配到目标id时返回修改属性后的新对象，其余项原样返回：

// 新增修改方法，可传入目标id和新的属性值
const updateRowName = (id, newName) => {
  setbioData(prev => prev.map(item => {
    // 匹配到目标id时返回修改后的新对象，不修改原对象
    return item.id === id ? {...item, name: newName} : item
  }))
}

调用示例：修改id为2的第二行name为"新姓名"：

<button onClick={() => updateRowName(2, '新姓名')}>修改第二行名称</button>

3、通过表单新增一行数据 #

首先新增两个状态存储表单输入的姓名、年龄值，提交表单时生成新的数据项，合并到原数组后更新状态：

// 新增表单相关状态
const [inputName, setInputName] = useState('')
const [inputAge, setInputAge] = useState('')

// 新增提交方法
const addNewRow = (e) => {
  e.preventDefault()
  // 生成不重复的id，取现有最大id加1
  const newId = bioData.length ? Math.max(...bioData.map(item => item.id)) + 1 : 1
  const newItem = {
    id: newId,
    name: inputName,
    age: Number(inputAge)
  }
  // 合并生成新数组
  setbioData(prev => [...prev, newItem])
  // 提交后清空输入框
  setInputName('')
  setInputAge('')
}

在JSX中加入表单部分：

<form onSubmit={addNewRow}>
  <input 
    type="text" 
    placeholder="输入姓名" 
    value={inputName} 
    onChange={(e) => setInputName(e.target.value)} 
    required
  />
  <input 
    type="number" 
    placeholder="输入年龄" 
    value={inputAge} 
    onChange={(e) => setInputAge(e.target.value)} 
    required
  />
  <button type="submit">新增行</button>
</form>

完整可运行代码 #

import './App.css';
import React, {useState} from 'react';

const bio = [
  {id: 1, name: "Talha", age: 26}, 
  {id: 2, name: "Ayub", age: 22}
]

const App = () => {
  const [bioData, setbioData] = useState(bio); 
  // 新增表单相关状态
  const [inputName, setInputName] = useState('')
  const [inputAge, setInputAge] = useState('')

  // 删除指定行
  const deleteRow = (id) => {
    setbioData(prev => prev.filter(item => item.id !== id))
  }

  // 修改指定行的name属性
  const updateRowName = (id, newName) => {
    setbioData(prev => prev.map(item => {
      return item.id === id ? {...item, name: newName} : item
    }))
  }

  // 新增行
  const addNewRow = (e) => {
    e.preventDefault()
    const newId = bioData.length ? Math.max(...bioData.map(item => item.id)) + 1 : 1
    const newItem = {
      id: newId,
      name: inputName,
      age: Number(inputAge)
    }
    setbioData(prev => [...prev, newItem])
    setInputName('')
    setInputAge('')
  }

  return (
    <div className="App">
      {/* 新增表单 */}
      <form onSubmit={addNewRow} style={{margin: '20px 0'}}>
        <input 
          type="text" 
          placeholder="输入姓名" 
          value={inputName} 
          onChange={(e) => setInputName(e.target.value)} 
          required
          style={{marginRight: '10px'}}
        />
        <input 
          type="number" 
          placeholder="输入年龄" 
          value={inputAge} 
          onChange={(e) => setInputAge(e.target.value)} 
          required
          style={{marginRight: '10px'}}
        />
        <button type="submit">新增数据</button>
      </form>

      {
      bioData.map((arr) =>
      <div key={arr.id} style={{margin: '10px 0'}}>
       <h3>Name: {arr.name}, Age: {arr.age}</h3>
       <button onClick={() => deleteRow(arr.id)} style={{marginRight: '10px'}}>删除该行</button>
       {/* 示例：点击修改当前行name */}
       <button onClick={() => updateRowName(arr.id, `${arr.name}(已修改)`)}>修改当前行名称</button>
      </div>
      )}
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Awais Shahid