React遍历渲染数据时点击按钮如何删除当前Card组件

核心逻辑是通过响应式状态维护用户列表，点击删除时过滤掉目标用户项，触发视图自动更新，具体实现步骤如下：

• 修正原有代码的命名问题：原代码外层存储全量用户的数组、map遍历的单项变量都命名为user，存在命名冲突，先把全量用户数组变量名改为users。
• 将用户数组转为响应式状态，保证数组修改后能触发视图重渲染。
• 遍历渲染列表时，给每个列表项绑定唯一key，同时给Remove按钮绑定点击事件，传入当前项的唯一标识（用户id/邮箱）。
• 点击按钮时，从用户数组中过滤掉目标用户，用新数组更新状态，对应的Card组件会自动从页面移除。

import { useState } from 'react';
// 引入你的Card组件

function UserList() {
  // 初始化用户列表状态，替换成你实际的用户数据源
  const [users, setUsers] = useState([/* 你的全量用户对象数组 */])

  // 删除用户的处理函数
  const handleRemove = (targetIdentifier) => {
    // 如果用用户id当唯一标识，这里就判断user.id !== targetIdentifier
    setUsers(prevUsers => prevUsers.filter(user => user.email !== targetIdentifier))
  }

  return (
    <div className="user-list">
      {users?.map(user => (
        // 必须给列表项加唯一key，优先用用户id，没有的话用邮箱也可，禁止用数组下标当key
        <div key={user.email}>
          <Card email={user.email} />
          {/* 点击时传入当前用户的唯一标识 */}
          <button onClick={() => handleRemove(user.email)}>Remove</button>
        </div>
      ))}
    </div>
  )
}

export default UserList

不要直接修改原状态数组（比如用splice直接操作原数组），状态更新必须传入全新的数组，否则React不会触发重渲染，删除效果不会生效。
列表的key必须使用用户的唯一标识，不要用map遍历的下标，否则删除列表项时会出现组件状态错乱、props错位的问题。
如果你的用户数据有专属的userId字段，优先用userId作为匹配标识和key，稳定性比邮箱更高。

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