React.js中如何通过唯一Key删除指定Div？

你的代码存在几个关键问题导致删除操作触发后所有Div被清空：

• 错误将JSX元素存入state：React state应存储业务数据而非UI元素，直接存JSX会导致状态追踪混乱，无法精准定位单个元素。
• 全局变量id重复复用：每次点击添加按钮生成的id会被循环中所有新Div共享，导致所有元素的key完全相同，React无法区分不同元素。
• 删除逻辑依赖错误标识：handleDelete中用index !== key过滤数组，但key是uuid字符串、index是数字，两者永远不相等，过滤后数组无变化；再通过setItems(items-1)触发重新渲染时，重复的key会让React批量卸载所有元素。

修正后的完整代码 #

import './App.css';
import { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

function App() {
  // 存储带唯一id的物品数据数组
  const [items, setItems] = useState([{ id: uuidv4() }]);

  const handleAdd = () => {
    // 追加新的物品数据，生成唯一id
    setItems(prevItems => [...prevItems, { id: uuidv4() }]);
  };

  const handleDelete = (itemId) => {
    // 根据id精准过滤删除目标元素
    setItems(prevItems => prevItems.filter(item => item.id !== itemId));
  };

  return (
    <div className="App">
      {/* 遍历数据数组生成UI元素 */}
      {items.map(item => (
        <div key={item.id} className="subcontainer2">
          <div className="item1">
            <span>Item </span>
            <input type="text" placeholder='item name' className="subinputfields" />
          </div>
          <div className="item2">
            <span>Quantity</span>
            <input type="number" placeholder='1' className="qty" />
          </div>
          <div className="item2">
            <span>Price/Rate</span>
            <input type="number" className='price' name="price" min="0.00" step="0.01" placeholder='&#8377; 0.00' />
          </div>
          <div className="item2">
            <span>Action</span>
            <img 
              src="delete.png" 
              className='deletebtn' 
              onClick={() => handleDelete(item.id)} 
              alt="Delete item" 
            />
          </div>
        </div>
      ))}

      <div onClick={handleAdd} className="addbtn">
        Add Items
      </div>
    </div>
  );
}

export default App;

关键改动说明 #

• 用数据数组替代JSX数组：items state存储带唯一id的对象数组，符合React状态管理的最佳实践，便于追踪和修改单个元素。
• 添加元素直接更新数据：handleAdd通过扩展运算符创建新数组并追加带新uuid的对象，彻底避免全局变量导致的id重复问题。
• 基于唯一id执行删除：handleDelete接收目标元素的id，通过filter精准移除对应项，不再依赖索引或错误标识。
• 渲染时绑定唯一key：遍历数据数组生成UI时，用元素自身的id作为key，确保React能正确识别每个元素，避免重复key引发的渲染异常。

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