React-Bootstrap Accordion：通过useState控制展开/折叠异常问题

你的代码存在几个关键问题导致无法正常切换卡片1的状态：

• 使用了defaultActiveKey，这是非受控组件的属性，当你想用useState主动控制展开状态时，必须改用受控属性activeKey。
• 未监听Accordion的onSelect事件，点击Accordion头部时，状态不会同步更新，导致手动修改状态后组件行为不一致。
• 变量名拼写错误：acitveCard应为activeCard（虽不影响运行，但属于代码规范问题）。
• 按钮的点击逻辑仅固定设置为"1"，没有实现"切换"卡片1状态的逻辑。

修正后的代码 #

import Accordion from 'react-bootstrap/Accordion';
import { useState } from 'react';

function App() {
  // 修正拼写错误：acitveCard → activeCard
  const [activeCard, setActiveCard] = useState("0");

  // 处理Accordion头部点击的状态同步
  const handleAccordionSelect = (key) => {
    setActiveCard(key);
  };

  // 实现切换卡片1的逻辑：当前展开则折叠，折叠则展开
  const toggleCard1 = () => {
    setActiveCard(prev => prev === "0" ? "1" : "0");
  };

  return (
    <>
      {/* 改用activeKey绑定受控状态，添加onSelect事件 */}
      <Accordion activeKey={activeCard} onSelect={handleAccordionSelect}>
        <Accordion.Item eventKey="0">
          <Accordion.Header>#1</Accordion.Header>
          <Accordion.Body>
            accor body 1 : active card= {activeCard}
          </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
          <Accordion.Header>#2</Accordion.Header>
          <Accordion.Body>
            accor body 2: active card = {activeCard}
          </Accordion.Body>
        </Accordion.Item>
      </Accordion>
      {/* 使用切换逻辑的函数 */}
      <button type="button" onClick={toggleCard1}>切换卡片1状态</button>
    </>
  );
}

export default App;

关键修改说明 #

1. 切换为受控模式：将defaultActiveKey替换为activeKey={activeCard}，让状态完全由useState控制。
2. 同步头部点击状态：添加onSelect事件监听，点击Accordion头部时自动更新activeCard状态，保证UI和状态一致。
3. 实现切换逻辑：toggleCard1函数通过判断当前激活的key，实现卡片1的展开/折叠切换。
4. 修正变量名：统一修正拼写错误，提升代码可读性。

可选扩展：允许折叠所有卡片 #

如果需要点击已展开的卡片头部时关闭它（所有卡片折叠），可以修改handleAccordionSelect函数：

const handleAccordionSelect = (key) => {
  setActiveCard(prev => prev === key ? null : key);
};

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