React数组删除组件异常：删除选中项时连带删除后续项

问题分析 #

你遇到的删除异常，是三个问题叠加导致的：闭包捕获旧索引、状态更新依赖旧快照、随机key引发组件身份混乱，最终触发错误的删除逻辑。

1. 闭包锁死了旧索引值 #

在handleAdd里，你给每个Category组件绑定onDelete={() => handleRemove(newIndex)}，这里的newIndex是创建组件时的数组长度。但闭包会捕获这个值并固定下来——当后续有元素被删除，数组的实际索引已经变化，但旧组件的onDelete回调里还是用的创建时的旧索引。

举个例子：

• 创建第3个元素时，newIndex是2（此时数组长度为2，添加后变成3）
• 删除第1个元素后，数组长度变为2，第3个元素的实际索引变成1，但它的onDelete还是调用handleRemove(2)，splice(2,1)会删除从索引2开始的所有元素（因为数组长度只有2，索引2超出范围，splice会直接删到末尾），最终就只剩前两个元素。

2. 状态更新未用函数式写法 #

handleRemove里直接用[...categoryArray]复制数组，这种写法依赖当前的categoryArray状态，但React状态更新是异步的，连续操作时可能拿到旧的状态快照，导致更新结果不符合预期。

3. 随机key引发组件身份混乱 #

用Math.floor(Math.random() * 100001)作为key，会让React无法正确识别组件的唯一性，数组变化时可能触发不必要的重渲染，甚至混淆组件的状态，加重异常表现。

修复方案 #

核心思路 #

放弃直接存储ReactElement到状态，改用存储分类数据对象（带唯一ID），通过ID来定位和删除元素，彻底摆脱索引依赖；同时使用函数式状态更新确保拿到最新状态。

修改后的代码 #

App.tsx

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

// 定义分类数据结构
interface CategoryData {
  id: string;
  name: string;
}

function App() {
  const [categories, setCategories] = useState<CategoryData[]>([]);

  const handleAdd = () => {
    // 生成唯一ID（生产环境建议用uuid库）
    const newId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
    setCategories(prev => [...prev, { id: newId, name: "" }]);
  };

  const handleRemove = (targetId: string) => {
    // 通过ID过滤删除，不依赖索引
    setCategories(prev => prev.filter(item => item.id !== targetId));
  };

  const handleUpdateName = (targetId: string, newName: string) => {
    setCategories(prev => 
      prev.map(item => 
        item.id === targetId ? {...item, name: newName} : item
      )
    );
  };

  return (
    <div className="App">
      <div className="categories">
        <div className="categories-block">
          <p>Categories</p>
        </div>
        <p className="plus" onClick={handleAdd}>+</p>
      </div>
      <div className="subcategories">
        {categories.map(item => (
          <Category
            key={item.id}
            id={item.id}
            initialName={item.name}
            onDelete={() => handleRemove(item.id)}
            onUpdateName={handleUpdateName}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

Category.tsx

import React, { useState, useEffect } from "react";
import "../css/category.css";

interface IProps {
  id: string;
  initialName: string;
  onDelete: () => void;
  onUpdateName: (id: string, name: string) => void;
}

function Category({ id, initialName, onDelete, onUpdateName }: IProps) {
  const [categoryName, setCategoryName] = useState(initialName);
  const [isCategoryVisible, setCategoryVisible] = useState(!!initialName);
  const [inputActive, setInputActive] = useState(!initialName);
  const [editActive, setEditActive] = useState(false);

  // 同步父组件传来的初始名称
  useEffect(() => {
    setCategoryName(initialName);
    setCategoryVisible(!!initialName);
    setInputActive(!initialName);
  }, [initialName]);

  const saveName = () => {
    onUpdateName(id, categoryName);
  };

  const handleAddCategory = () => {
    if (categoryName.trim()) {
      setCategoryVisible(true);
      setInputActive(false);
      saveName();
    }
  };

  const handleEdit = () => {
    setCategoryVisible(false);
    setInputActive(true);
    setEditActive(true);
  };

  const handleApply = () => {
    setEditActive(false);
    setCategoryVisible(true);
    setInputActive(false);
    saveName();
  };

  const handleCancel = () => {
    setCategoryName(initialName);
    setCategoryVisible(true);
    setInputActive(false);
    setEditActive(false);
  };

  return (
    <div className="Category">
      <div className="category">
        <div className="category-block">
          <div className="category-text">
            <p className={isCategoryVisible ? "name-active" : "name"}>
              {categoryName}
            </p>
            <input
              type="text"
              value={categoryName}
              onChange={(e) => setCategoryName(e.target.value)}
              placeholder="Category name"
              className={inputActive ? "" : "input-disable"}
            />
          </div>
        </div>
        <div
          className={
            inputActive && !editActive
              ? "minus-plus-active"
              : "minus-plus-disable"
          }
        >
          <p className="minus">-</p>
          <p className="plus" onClick={handleAddCategory}>+</p>
        </div>
        <div
          className={editActive ? "cancel-aply-active" : "cancel-aply-disable"}
        >
          <p className="aply cancel-aply-item" onClick={handleApply}>✔</p>
          <p className="cancel cancel-aply-item" onClick={handleCancel}>x</p>
        </div>
        <div className={inputActive ? "edit-menu" : "edit-menu-active"}>
          <p className="plus edit-menu-item">+</p>
          <p className="edit edit-menu-item" onClick={handleEdit}>E</p>
          <p className="delete edit-menu-item" onClick={onDelete}>X</p>
        </div>
      </div>
    </div>
  );
}

export default Category;

为什么这样修复有效 #

1. 用数据代替组件存状态：React状态应该存储数据，而非UI元素，这样状态管理更清晰，也避免了闭包捕获旧组件属性的问题。
2. 通过ID删除：不再依赖数组索引，不管数组怎么变化，只要ID唯一就能精准删除目标元素。
3. 函数式状态更新：所有setCategories都用prev => ...的写法，确保每次更新都基于最新的状态快照，避免异步更新导致的错误。
4. 稳定的key：用元素的唯一ID作为key，React能正确识别每个组件的身份，优化重渲染，避免组件状态混乱。

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