React中如何点击对应按钮删除其关联的特定div元素？

你当前的实现存在两个核心问题：

• 仅用计数器counter控制渲染列表的长度，删除操作仅对计数器做减1处理，React只会按最新长度渲染前N个项，无法匹配到你要删除的指定元素。
• 列表渲染未添加唯一key属性，会导致React Diff算法匹配列表项时出现错乱，进一步加剧元素匹配错误的问题。

将状态改为存储带唯一标识的数组，通过唯一标识匹配要删除的指定项，示例实现代码如下：

import { useState } from "react";

const App = () => {
  // 状态改为存储带唯一id的对象数组，初始默认1个项
  const [itemList, setItemList] = useState([{ id: 1 }]);

  const handleAddDiv = () => {
    // 新增项时生成唯一id，简单场景用时间戳即可满足唯一性要求
    setItemList([...itemList, { id: Date.now() }]);
  };

  // 接收要删除的项id作为入参
  const handleRemoveDiv = (targetId) => {
    // 过滤掉id匹配的项，剩余项即为要保留的元素
    setItemList(itemList.filter(item => item.id !== targetId));
  };

  return (
    <div className="App">
      {itemList.map((item) => (
        // 给每一项绑定唯一key，保证React可以正确匹配列表元素
        <div key={item.id}>
          <div>
            <input type="text" />
            {/* 点击删除时传入当前项的id */}
            <button onClick={() => handleRemoveDiv(item.id)}>Remove</button>
          </div>
        </div>
      ))}
      <button onClick={handleAddDiv}>Add</button>
    </div>
  );
}
export default App;

如果需要保留每个输入框填写的内容，只需在每个item对象中新增value字段存储输入值，给input绑定onChange事件同步状态即可。

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