代码中存在逻辑错误。您的active是显示所有卡片的true或不显示任何卡片的false。
一种方法是将当前活动卡的索引保存在active状态中：

// You can use active to save the index of open card: 
 <button className={`${s.brandBtn}`} onClick={()=>setActive(index)}>

 //And then match current index and active index: 
 <div className={`${s.openCard} ${index === active ? "" : s.dNone}`}>

您需要单独管理状态

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

export const Shop = () => {
  const card = [
    {
      name: "Brands",
      cat: ["Adidas", "Nike"],
      show: false,
      id: 1,
    },
    {
      name: "Size",
      cat: ["43", "43,5"],
      show: false,
      id: 2,
    },
    {
      name: "Type",
      cat: ["Sneakers", "Slippers"],
      show: false,
      id: 3,
    },
  ];
  const [show, setShow] = useState({});
  const handleToggle = (id) => {
    setShow({ ...show, [id]: !show[id] });
  };
  return (
    <div className={s.container}>
      <div className={s.brandInner}>
        {card.map((i, index) => {
          return (
            <div className={s.brandCard} key={i.id}>
              <button className={`${s.brandBtn}`} onClick={() => handleToggle(i.id)}>
                {i.name}
              </button>
              <div className={`${s.openCard} ${show[i.id] ? "" : `${s.dNone}`}`}>
                <ul className={s.brandList}>
                  {i.cat.map((elem) => {
                    return (
                      <li key={elem} className={s.brandItem}>
                        {elem}
                      </li>
                    );
                  })}
                </ul>
                <button className={s.brandOpenBtn}>Apply</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

你需要跟踪“卡片”列表中每一项的状态。这里有一个可能的替代方案，希望能有所帮助。

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

export const ShopItem = (props) => {    
  const [active, setActive] = useState(false);
  const handleToggle = () => setActive(!active);
  const {item} = props;
  return (
      <div className={s.brandCard}>
        <button className={`${s.brandBtn}`} onClick={handleToggle}>
          {item.name}
        </button>
        <div className={`${s.openCard} ${active ? "" : `${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>
    );
};

export const Shop = () => {
  const card = [
    {
      name: "Brands",
      cat: ["Adidas", "Nike"],
      show: false,
      id: 1,
    },
    {
      name: "Size",
      cat: ["43", "43,5"],
      show: false,
      id: 2,
    },
    {
      name: "Type",
      cat: ["Sneakers", "Slippers"],
      show: false,
      id: 3,
    },
  ]; 
  return (
    <div className={s.container}>
      <div className={s.brandInner}>
        {card.map((i, index) => {
          return <ShopItem key={i.id} item={i}/>          
        })}
      </div>
    </div>
  );
};

查看此代码：

export default function App() {
  const cards = [
    {
      name: "Brands",
      cat: ["Adidas", "Nike"],
      show: false,
      id: 1,
    },
    {
      name: "Size",
      cat: ["43", "43,5"],
      show: false,
      id: 2,
    },
    {
      name: "Type",
      cat: ["Sneakers", "Slippers"],
      show: false,
      id: 3,
    },
  ];
  const [activeId, setActiveId] = useState(null);

  const handleToggle = (id) => () => {
    setActiveId(id);
  };

  return (
    <div>
      <div>
        {cards.map((card) => {
          return (
            <div key={card.id}>
              <button onClick={handleToggle(card.id)}>
                {card.name}{card.id === activeId && ' - active' }
              </button>
              <div >
                <ul >
                  {card.cat.map((elem) => {
                    return (
                      <li key={elem} >
                        {elem}
                      </li>
                    );
                  })}
                </ul>
                <button>Apply</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};