React使用useState做列表卡片切换时全项同步触发，如何仅切换点击项？

云原生阿岚

2026-10-3

问题原因

你所有列表项共用同一个布尔类型的secondCard状态，没有区分具体点击的列表项，因此状态变更后所有项的显隐逻辑会同步执行。

实现方案

将状态改为存储当前激活项的唯一标识（这里直接复用你已用的user.index作为唯一值即可），点击时传入当前项的标识做匹配判断，只有标识匹配的项才展示卡片。

修改后的完整代码如下：

import { useState, useEffect } from 'react'

export default function AdminsComponent() {
  // 状态改为存储激活项的index，初始值为null代表无激活项
  const [activeCardIndex, setActiveCardIndex] = useState(null)

  // 接收当前点击项的index作为参数
  const toggleCard = (currentIndex) => {
    // 如果点击的是当前已激活的项，则关闭，否则切换为当前点击项
    setActiveCardIndex(activeCardIndex === currentIndex ? null : currentIndex)
  }

  const adminsComponent = adminData.map((user) => (
    // 这里用Fragment包裹li和div，避免map返回多个并列元素报错
    <>
      <li
        key={user.index}
        className="px-4 my-1 lg:pl-8 w-full scale-95 transform transition duration-500 hover:scale-100 text-left"
        onClick={() => toggleCard(user.index)}
      >
       // codehere
      </li>
      
      {/* 只有当前项的index和激活状态匹配时才展示卡片 */}
      {activeCardIndex === user.index && (
        <div className="px-4 border-l-4 p-2 bg-accent-0 text-accent-8 pb-4 shadow-lg border-blue">
          // ... codehere
        </div>
      )}
    </>
  ))

  return <ul>{adminsComponent}</ul>
}