React如何实现删除按钮仅渲染一次 点击删除选中堆叠卡片

现有代码问题 #

• Card组件未接收、绑定传入的onClick属性，点击卡片无法触发选中逻辑
• 状态命名不规范：存储用户列表的状态名单数user易混淆，选中状态设置方法名setSlectedUser存在拼写错误
• 删除逻辑直接读取闭包内的user状态，可能拿到旧值导致删除异常；删除后未清空选中状态
• 列表渲染未加唯一key，会触发React渲染警告
• 卡片无选中态视觉反馈，堆叠场景下用户无法识别当前选中项
• 存储用户列表的状态初始值为null，渲染时需要额外做非空判断

修正后代码 #

父组件状态与逻辑 #

// 状态名改为复数users，初始值为空数组省去非空判断
const [users, setUsers] = React.useState([])
// 修正选中状态拼写，初始无选中值为null
const [selectedUserId, setSelectedUserId] = React.useState(null)


const getUsers = async () => {
  try{
    const response = await axios.get('http://localhost:8000/users')
    setUsers(response.data)
  } 
  catch(err){
    console.log(err)
  }
}

useEffect(()=>{
  getUsers()
}, [])

const handleCardClick = (userId) => {
  setSelectedUserId(userId)
}

const handleRemove = () => {
  if (!selectedUserId) return
  // 函数式更新避免闭包旧值问题
  setUsers(prevUsers => prevUsers.filter(user => user.userId !== selectedUserId))
  // 删除后重置选中状态
  setSelectedUserId(null)
}

父组件渲染代码 #

<div>
  {users.map(user => (
     // 列表项必须加唯一key，用userId做标识
     <div key={user.userId}>
       <Card
         country={user.country}
         name={user.name}
         about={user.about}
         photo={user.photo}
         isSelected={selectedUserId === user.userId}
         onClick={() => handleCardClick(user.userId)}
       />
     </div>
  ))}
  {/* 按钮放在map循环外层，全程仅渲染1次，符合要求 */}
  <button 
    className='btn-cards text-center' 
    onClick={handleRemove}
    disabled={!selectedUserId} // 未选中卡片时按钮不可点
  >
    DELETE
  </button>
</div>

Card组件修正 #

import React from 'react'
// 补收isSelected、onClick两个传入属性
const Card = ({name, about, photo, country, isSelected, onClick}) => {
  return (
    <div 
      // 选中态加高亮、层级提升样式，适配堆叠排布场景
      className={`bg-white rounded-3xl shadow-lg p-6 mb-4 card cursor-pointer transition-all ${isSelected ? 'ring-4 ring-blue-500 scale-[1.02] z-10' : ''}`}
      onClick={onClick} // 绑定点击事件到卡片根节点
    >
        <div className='flex flex-row justify-between'>
            <div className='flex flex-col'>
                <img className='rounded-2xl w-96 h-96 object-cover' src={photo} alt={name} />
                <h1 className='text-2xl'>{name}</h1>
                <h1 className='text-xl'>{country}</h1>
                <h2 className='text-xl'>{about}</h2>
            </div>
        </div>
    </div>
  )
}

export default Card

关键实现说明 #

• 删除按钮放在数组遍历逻辑的外层，不会随卡片循环生成，页面加载后只会存在一个按钮实例，满足“仅渲染一次”的要求
• 给Card组件补上点击事件绑定，点击任意卡片即可记录当前选中的用户ID，选中卡片会自动上浮高亮，适配堆叠排布的交互
• 删除逻辑采用函数式状态更新，避免异步场景下拿到旧的用户列表导致删除错误，删除完成后自动清空选中状态
• 未选中任何卡片时删除按钮置灰，避免无效操作
• 列表项补充唯一key，消除React渲染警告

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