React组件按钮点击异常：点击单个按钮触发所有内容显示求助

你当前的问题根源在于用了一个单一的active布尔状态控制所有卡片的显示/隐藏——点击任意按钮都会切换这个全局状态，自然所有卡片会同时变化。

修复步骤： #

• 将active状态改为存储当前激活卡片的ID（初始值设为null，表示无激活卡片）
• 修改点击事件函数，传入当前卡片的ID，判断是否要激活/关闭该卡片
• 渲染卡片内容时，对比当前卡片ID与active状态，决定是否显示

修改后的完整代码： #

import React from "react";
import s from "./Shop.module.css";
import { useState } from "react";

export const Shop = () => {
  const card = [
    {
      name: "Brands",
      cat: ["Adidas", "Nike"],
      id: 1,
    },
    {
      name: "Size",
      cat: ["43", "43,5"],
      id: 2,
    },
    {
      name: "Type",
      cat: ["Sneakers", "Slippers"],
      id: 3,
    },
  ];
  // 用ID存储当前激活的卡片，初始为null
  const [activeId, setActiveId] = useState(null);

  // 接收当前卡片ID，判断切换状态
  const handleToggle = (cardId) => {
    setActiveId(prevId => prevId === cardId ? null : cardId);
  };

  return (
    <div className={s.container}>
      <div className={s.brandInner}>
        {card.map((item) => {
          // 判断当前卡片是否激活
          const isActive = activeId === item.id;
          return (
            <div className={s.brandCard} key={item.id}>
              <button 
                className={`${s.brandBtn}`} 
                onClick={() => handleToggle(item.id)}
              >
                {item.name}
              </button>
              <div className={`${s.openCard} ${isActive ? "" : s.dNone}`}>
                <ul className={s.brandList}>
                  {item.cat.map((elem) => {
                    return (
                      <li key={elem} className={s.brandItem}>
                        {elem}
                      </li>
                    );
                  })}
                </ul>
                <button className={s.brandOpenBtn}>Apply</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

额外说明： #

• 原来card数组里的show字段可以删掉，现在用组件状态管理激活状态，不需要存在原数据里
• 如果需要支持同时打开多个卡片，可以把activeId改成数组，存储所有激活的ID，点击时添加/移除对应ID即可（比如用includes判断、filter移除）

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