React删除组件异常：点击删除按钮后误删目标项后续所有列表项

看起来你的问题主要来自三个方面：列表项缺少唯一key、删除时的对象引用比较不可靠，以及子组件中useEffect的依赖导致意外触发删除逻辑。咱们一步步来解决：

1. 给列表项添加正确的唯一key #

React渲染列表时依赖key来区分不同组件实例，没有正确的key会导致React复用组件状态，这就是你看到「目标项之后的所有列表项都被移除」的核心原因。

你需要在map渲染ListItem时，把key绑定到每个项的唯一id上：

{list.map(item => <ListItem key={item.id} item={item} onDelete={() => onHandleDelete(item)} />)}

2. 用唯一ID替代对象引用进行过滤 #

当前删除逻辑用item !== itemDelete做对象引用比较，这种方式不够健壮（比如从API重新获取列表后，对象引用会变化）。更可靠的方式是用每个项的唯一id判断：

const onHandleDelete = (itemDelete) => {
  setList(list.filter(item => item.id !== itemDelete.id))
}

3. 简化子组件的删除逻辑 #

子组件里维护deleteClicked状态配合useEffect的写法，加上父组件的onDelete函数每次渲染都会重新创建，会导致useEffect意外触发。其实可以简化逻辑：点击删除按钮后先调用API，成功后再通知父组件删除，不需要额外维护子组件状态：

修改后的ListItem组件：

function ListItem({ item, onDelete }) {
  const onClickDelete = async () => {
    try {
      // 替换成你的实际删除API调用
      await fetch(`/api/items/${item.id}`, { method: 'DELETE' });
      // API调用成功后，通知父组件删除该项
      onDelete();
    } catch (err) {
      // 处理API调用失败的情况，比如提示用户
      console.error('删除失败:', err);
    }
  }
 
  return (
    <div>{item.title} <button onClick={onClickDelete}>Delete</button></div>
  );
}

如果需要保留加载状态（比如按钮置灰显示「删除中」），可以用useCallback包裹父组件的删除函数，避免子组件useEffect依赖频繁变化：

// 在TopList组件中引入useCallback
import { useState, useCallback } from "react";

const onHandleDelete = useCallback((itemDelete) => {
  setList(prevList => prevList.filter(item => item.id !== itemDelete.id))
}, []);

完整修复后的代码 #

import "./styles.css";
import { useState, useCallback } from "react";

export default function App() {
  return (
    <TopList />
  );
}

function TopList() {
  const [list, setList] = useState([
    {
      "id": "something1",
      "title": "something1"
    },
    {
      "id": "something2",
      "title": "something2"
    },
    {
      "id": "something3",
      "title": "something3"
    }
  ]);

  const onHandleDelete = useCallback((itemDelete) => {
    setList(prevList => prevList.filter(item => item.id !== itemDelete.id))
  }, []);

  return (
    <div>
      {list.map(item => (
        <ListItem 
          key={item.id} 
          item={item} 
          onDelete={() => onHandleDelete(item)} 
        />
      ))}
    </div>
  );
}

function ListItem({ item, onDelete }) {
  const onClickDelete = async () => {
    try {
      // 模拟API调用，替换为实际接口
      await new Promise(resolve => setTimeout(resolve, 500));
      onDelete();
    } catch (error) {
      console.error('删除失败:', error);
    }
  }
 
  return (
    <div>{item.title} <button onClick={onClickDelete}>Delete</button></div>
  );
}

为什么之前会出现异常？ #

因为没有给列表项添加正确的key，React无法区分不同的列表项。删除一个项后，React会复用后面的组件实例，导致子组件的deleteClicked状态被错误继承，进而触发更多onDelete调用，最终看起来像是后面的项都被删除了。加上正确的key后，React就能准确识别每个组件实例，避免状态复用的问题。

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