React表格元素删除异常：删除指定元素时误删后续元素

问题根源 #

你的代码有三个核心问题导致删除时误删多个元素：

1. State存储JSX元素而非原始数据：把<Element>组件直接存在myArray中，无法正确追踪每个元素的唯一标识，操作时容易混淆。
2. 删除逻辑依赖错误的值：handleDelete里用e.target.value完全错误，按钮未设置value属性，且你已经传入了要删除的value，没必要依赖事件对象；同时直接访问元素的item.value不是正确的props值。
3. 新增元素的value依赖数组长度：删除元素后数组长度变小，新增元素的value会和已存在的元素重复，导致删除时匹配多个元素。

修正后的代码 #

import * as React from 'react';
import { useState } from 'react'; 
import { Table } from 'reactstrap';
import { Button } from 'reactstrap';

export default function App() {
  // 存储元素数据，每个元素带唯一id
  const [items, setItems] = useState<Array<{ id: number; value: number }>>([]);
  // 追踪下一个元素的唯一id，避免依赖数组长度
  const [nextId, setNextId] = useState(0);

  function addElement() {
    setItems(prevItems => [
      ...prevItems,
      { id: nextId, value: nextId }
    ]);
    setNextId(prevId => prevId + 1);
  }

  const handleDelete = (id: number) => {
    // 根据唯一id过滤，精准删除指定元素
    setItems(prevItems => prevItems.filter(item => item.id !== id));
  };

  return (
    <div>
      <Button onClick={addElement}>Add Element</Button>
      <Table>
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {/* 根据数据渲染组件，加上唯一key */}
          {items.map(item => (
            <Element 
              key={item.id}
              value={item.value} 
              handleDelete={() => handleDelete(item.id)} 
            />
          ))}
        </tbody>
      </Table>
    </div>
  );
}

function Element({ value, handleDelete }: { value: number; handleDelete: () => void }) {
  return (
    <tr>
      <td>{value}</td>
      <td>Test</td>
      <td>
        <Button onClick={handleDelete}>Remove Element</Button>
      </td>
    </tr>
  );
}

关键修改说明 #

• State存数据不存组件：items数组存储的是包含唯一id的对象，而非JSX元素，让数据操作更清晰可靠。
• 唯一id做标识：用独立的nextId生成每个元素的唯一标识，避免删除后新增元素的value重复，确保删除时只匹配目标元素。
• 简化删除逻辑：直接通过元素的id进行过滤，彻底避免误删问题。
• 添加列表key：给每个<Element>组件加上唯一的key，帮助React正确识别列表元素，提升渲染效率和准确性。

内容的提问来源于stack exchange，提问作者Biggy Poopa