React中数组元素删除异常的原因及修复方案问询

为什么会出现这些问题？ #

1. 用唯一key却删不掉元素 #

你在handleAdd里生成了唯一的key，但传给handleDelete的是这个key值，而handleDelete里却用数组索引来过滤。比如你传的key是类似1690000000000.123的数值，和数组的索引（0、1、2...）完全不匹配，filter条件i !== index永远为真，自然删不掉任何元素。

2. 用索引当key导致元素名称丢失 #

React依赖key来识别每个组件的唯一性。当你用数组索引作为key时，删除中间元素后，后面的元素索引会自动前移。比如原来索引1的组件，在删除索引0的元素后会变成索引0，React会复用原来索引0的组件实例，导致组件的状态（比如输入的名称）和当前数据不匹配，看起来就是名称“丢失”或者错乱了。

修复代码 #

核心思路是状态里存数据而非渲染好的组件，用唯一id管理每个元素：

import React, { useState } from "react";
import Category from "./components/Category";
import "./css/style.css";

// 定义每个分类的数据结构
interface CategoryData {
  id: string;
  // 如果需要存名称等其他数据，在这里添加
}

function App() {
  // 状态存数据数组，不是ReactElement数组
  const [cardDataArray, setCardDataArray] = useState<CategoryData[]>([]);

  const handleAdd = () => {
    // 生成唯一id，用Date.now+随机数转字符串更稳妥
    const uniqueId = `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
    setCardDataArray(prev => [...prev, { id: uniqueId }]);
  };

  const handleDelete = (id: string) => {
    // 根据id过滤数组，不再用索引
    setCardDataArray(prev => prev.filter(item => item.id !== id));
  };

  return (
    <div className="App">
      <div className="categories">
        <div className="categories-block">
          <p>Categories</p>
        </div>
        <p className="plus" onClick={handleAdd}>
          +
        </p>
        <p className="plus">-</p>
      </div>
      <div className="subcategories">
        {/* 渲染时根据数据生成组件，用id作为key */}
        {cardDataArray.map(item => (
          <Category 
            key={item.id} 
            onDelete={() => handleDelete(item.id)} 
            // 如果需要传数据给Category，比如名称，在这里传
          />
        ))}
      </div>
    </div>
  );
}

export default App;

关键修改点 #

• 状态存储数据而非组件：把原来的ReactElement[]换成了数据数组CategoryData[]，这样React能正确跟踪每个元素的身份，而不是直接存渲染后的组件。
• 用唯一id删除：删除时根据元素的唯一id过滤，再也不会和索引混淆。
• 渲染时用id作为key：给每个Category组件传数据里的id作为key，React能准确识别每个组件，删除操作后不会复用错误的组件实例，状态和组件就能对应上了。

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