如何在React.js中通过useState更新数组内对象的键值

针对你的需求，我们需要实现编辑数组对象属性和删除数组对象的功能，以下是完整的实现方案：

完整代码示例 #

import React, { useState } from 'react';
import { TableBody, TableRow, TableCell, Button, Link } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';

const Row = [
  {
    name: "jad",
    link: "/jad",
    calories: "52",
    Fat: "4",
    Carbs: "5",
    Protein: "41"
  },
  {
    name: "john",
    link: "/john",
    calories: "82",
    Fat: "42",
    Carbs: "35",
    Protein: "1"
  }
];

const MyTable = () => {
  const [myList, setMyList] = useState(Row);
  // 标记当前正在编辑的项名称（用name作为唯一标识，有专属id的话建议用id）
  const [currentEditName, setCurrentEditName] = useState(null);
  // 存储编辑过程中的表单数据
  const [editFormData, setEditFormData] = useState({});

  // 触发编辑：加载当前项数据到表单
  const handleEditStart = (item) => {
    setCurrentEditName(item.name);
    setEditFormData({ ...item });
  };

  // 处理编辑输入的内容变化
  const handleEditChange = (e) => {
    const { name, value } = e.target;
    setEditFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  // 保存编辑：更新数组内的目标对象
  const handleEditSave = () => {
    setMyList(prevList => 
      prevList.map(item => 
        item.name === currentEditName ? { ...editFormData } : item
      )
    );
    setCurrentEditName(null); // 退出编辑状态
  };

  // 删除指定项
  const handleDelete = (name) => {
    setMyList(prevList => prevList.filter(item => item.name !== name));
  };

  return (
    <TableBody>
      {myList.map((item) => (
        <TableRow key={item.name}>
          <TableCell>
            <Link href={item.link}>{item.name}</Link>
          </TableCell>
          {/* 编辑状态显示输入框，非编辑状态显示文本 */}
          <TableCell align="right">
            {currentEditName === item.name ? (
              <input
                type="text"
                name="calories"
                value={editFormData.calories}
                onChange={handleEditChange}
              />
            ) : (
              item.calories
            )}
          </TableCell>
          <TableCell align="right">
            {currentEditName === item.name ? (
              <input
                type="text"
                name="Fat"
                value={editFormData.Fat}
                onChange={handleEditChange}
              />
            ) : (
              item.Fat
            )}
          </TableCell>
          <TableCell align="right">
            {currentEditName === item.name ? (
              <input
                type="text"
                name="Carbs"
                value={editFormData.Carbs}
                onChange={handleEditChange}
              />
            ) : (
              item.Carbs
            )}
          </TableCell>
          <TableCell align="right">
            {currentEditName === item.name ? (
              <input
                type="text"
                name="Protein"
                value={editFormData.Protein}
                onChange={handleEditChange}
              />
            ) : (
              item.Protein
            )}
          </TableCell>
          <TableCell align="right">
            {currentEditName === item.name ? (
              <>
                <Button variant="contained" onClick={handleEditSave}>
                  保存
                </Button>
                <Button variant="outlined" onClick={() => setCurrentEditName(null)}>
                  取消
                </Button>
              </>
            ) : (
              <>
                <Button variant="contained" onClick={() => handleEditStart(item)}>
                  编辑
                </Button>
                <Button
                  variant="outlined"
                  startIcon={<DeleteIcon />}
                  onClick={() => handleDelete(item.name)}
                >
                  删除
                </Button>
              </>
            )}
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
  );
};

export default MyTable;

关键逻辑说明 #

1. 状态管理

   • currentEditName：标记当前正在编辑的项，确保同一时间只有一行处于编辑状态
   • editFormData：临时存储编辑过程中的输入值，避免直接修改原数组状态，符合React不可变更新的要求

2. 核心函数解析

   • handleEditStart：点击编辑按钮时，把当前项的数据拷贝到表单状态，同时标记当前编辑项
   • handleEditChange：通过受控组件方式更新表单值，使用函数式更新保证状态的连续性
   • handleEditSave：遍历原数组，找到目标项并替换为编辑后的新对象，返回新数组更新状态（必须创建新数组，不能直接修改原数组）
   • handleDelete：通过filter方法过滤掉要删除的项，返回新数组完成删除操作

3. 渲染逻辑调整

   • 根据currentEditName判断当前行的状态，编辑时显示输入框，非编辑时显示原始文本
   • 动态切换按钮组：编辑状态显示「保存/取消」，非编辑状态显示「编辑/删除」

内容的提问来源于stack exchange，提问作者Adeel Khanzada