React+TypeScript中从父组件数组移除子组件失败问题求助

你的代码存在几个关键错误，导致删除功能无法正常工作，以下是问题分析和修复方案：

核心问题点 #

• 状态存储错误：直接把<Category>组件实例存在cardArray中是React反模式，应该存储数据源（比如唯一标识）而非组件，否则会引发闭包陷阱和状态管理混乱。
• 索引与Key滥用：用数组长度作为组件key和删除索引，删除后数组长度变化会导致索引错位、Key重复，React无法正确识别组件身份。
• 渲染时覆盖Props：cardArray.map中重新创建<Category>组件，覆盖了handleAdd中传递的onDelete，且传递的cardArray.length是错误的删除索引。
• 状态更新未用函数式写法：handleDelete直接依赖cardArray变量，闭包会导致拿到旧的状态值，删除操作可能不生效。

修复后的代码 #

父组件 #

import { useState } from 'react';
import Category from './Category';

function App() {
  // 存储唯一标识的数组，而非组件实例
  const [categories, setCategories] = useState<number[]>([]);

  const handleAdd = () => {
    // 用时间戳生成唯一ID，避免重复
    setCategories(prevList => [...prevList, Date.now()]);
  };

  const handleDelete = (targetId: number) => {
    // 根据ID过滤删除，避免索引错位问题
    setCategories(prevList => prevList.filter(id => id !== targetId));
  };

  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">
        {categories.map(categoryId => (
          <Category 
            key={categoryId} 
            onDelete={() => handleDelete(categoryId)} 
          />
        ))}
      </div>
    </div>
  );
}

export default App;

子组件 #

interface IProps {
  onDelete(): void;
}

export default function Category({ onDelete }: IProps) {
  return (
    <div className="Category">
      <div className="category">
        <div className="category-block"></div>
        <div>
          <p className="delete edit-menu-item" onClick={onDelete}>
            X
          </p>
        </div>
      </div>
    </div>
  );
}

修复说明 #

1. 数据源驱动渲染：用唯一ID数组存储状态，渲染时根据ID生成组件，符合React状态管理的最佳实践，避免闭包问题。
2. 唯一Key与删除逻辑：用时间戳作为组件Key和删除标识，删除时通过ID过滤而非索引，彻底解决数组长度变化导致的索引错位问题。
3. 函数式状态更新：修改状态时使用prevList => ...的形式，确保拿到最新的状态值，避免闭包引发的旧状态问题。
4. 正确传递Props：遍历数据源时直接传递对应ID的删除回调，不会覆盖或错误传递Props。

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