React Hooks中从数组映射生成的卡片中删除单个元素的正确姿势是什么

在React Hooks开发过程中，我们经常会通过数组映射的方式渲染一组卡片组件，当需要实现删除单个卡片的功能时，很多开发者会因为状态更新逻辑不当导致删除结果不符合预期，比如删除了错误的卡片、状态没有正确更新等。下面我们就来讲解正确的实现方式。

常见错误原因分析

很多开发者在删除元素时，会直接修改原数组，或者没有正确区分每个卡片的唯一标识，导致状态更新出现偏差。React的状态更新是不可变的，不能直接修改原状态数组，必须返回一个新的数组才能让组件正确重新渲染。

正确实现步骤

1. 定义状态和初始数据

首先使用useState定义存储卡片数据的状态，每个卡片对象需要包含唯一的标识字段，比如id，这是后续删除元素时定位目标的关键。

import { useState } from 'react';

function CardList() {
  // 初始卡片数据，每个卡片有唯一id
  const [cardList, setCardList] = useState([
    { id: 1, title: '卡片1', content: '这是第一个卡片的内容' },
    { id: 2, title: '卡片2', content: '这是第二个卡片的内容' },
    { id: 3, title: '卡片3', content: '这是第三个卡片的内容' }
  ]);
}

2. 实现删除函数

删除函数需要接收要删除的卡片的唯一id，通过过滤原数组生成不包含目标元素的新数组，再调用状态更新函数更新状态。

// 删除卡片的函数，接收要删除的卡片id
const handleDeleteCard = (targetId) => {
  // 过滤出id不等于目标id的元素，生成新数组
  const newCardList = cardList.filter(item => item.id !== targetId);
  // 更新状态
  setCardList(newCardList);
};

3. 映射渲染卡片并绑定删除事件

在渲染时遍历cardList状态，为每个卡片绑定删除事件，将当前卡片的id传入删除函数。

return (
  <div className="card-list">
    {cardList.map(card => (
      <div key={card.id} className="card-item">
        <h3>{card.title}</h3>
        <p>{card.content}</p>
        <button onClick={() => handleDeleteCard(card.id)}>删除卡片</button>
      </div>
    ))}
  </div>
);

完整示例代码

下面是完整的组件代码，整合了上述所有逻辑：

import { useState } from 'react';

function CardList() {
  const [cardList, setCardList] = useState([
    { id: 1, title: '卡片1', content: '这是第一个卡片的内容' },
    { id: 2, title: '卡片2', content: '这是第二个卡片的内容' },
    { id: 3, title: '卡片3', content: '这是第三个卡片的内容' }
  ]);

  const handleDeleteCard = (targetId) => {
    const newCardList = cardList.filter(item => item.id !== targetId);
    setCardList(newCardList);
  };

  return (
    <div className="card-list">
      {cardList.map(card => (
        <div key={card.id} className="card-item" style={{ border: '1px solid #ccc', padding: '16px', margin: '8px' }}>
          <h3>{card.title}</h3>
          <p>{card.content}</p>
          <button onClick={() => handleDeleteCard(card.id)}>删除卡片</button>
        </div>
      ))}
    </div>
  );
}

export default CardList;

注意事项

• 每个映射生成的卡片必须设置唯一的key属性，最好使用数据本身的唯一id，不要使用数组索引作为key，否则在删除元素后可能导致渲染异常。
• 状态更新是异步的，不要依赖当前的cardList值做连续的状态更新，如果需要根据之前的状态更新，可以使用函数式的状态更新方式：setCardList(prevList => prevList.filter(item => item.id !== targetId))。
• 如果卡片数据是从接口获取的，要确保接口返回的每个数据都有唯一标识字段，方便后续的操作。

React_Hooks数组映射删除元素useState修改时间：2026-07-20 23:51:51