React Bootstrap Accordion组件defaultActiveKey动态渲染不生效问题排查

问题原因 #

1. 类型不匹配：你初始化useState("2")传入的是字符串类型的"2"，但动态渲染时给eventKey赋值的index + 1是数字类型，React Bootstrap的Accordion匹配defaultActiveKey时会做严格相等校验，类型不同会导致匹配失败，自然不会默认激活对应项。静态示例中你给eventKey传的是字符串"0"，和状态值类型一致，所以可以正常匹配。
2. 受控/非受控模式混用：defaultActiveKey是Accordion非受控模式下的属性，仅在组件首次渲染时生效一次，后续状态由组件内部自行维护。但你现在额外用useState维护了activeId来控制激活类，属于要自定义控制组件状态的受控场景，此时应该用受控属性activeKey而非defaultActiveKey，两者混用会导致内外状态不一致，出现失效问题。

解决方法 #

方案1：统一类型+使用非受控模式 #

如果不需要自定义控制Accordion的展开状态，只需要默认激活指定项，直接统一eventKey和defaultActiveKey的类型即可：

// 把初始值改为数字类型，和index+1的类型匹配
const [activeId, setActiveId] = useState(2);

或者把动态渲染的eventKey转为字符串：

eventKey={(index + 1).toString()}

方案2：切换为完全受控模式（推荐，适配你自定义激活类的需求） #

直接把Accordion的defaultActiveKey替换为受控属性activeKey，让组件的展开状态完全和你的activeId绑定，避免内外状态冲突：

<Accordion activeKey={activeId}>
  {/* 其余渲染逻辑保持不变 */}
</Accordion>

这种方式可以完全由你控制激活逻辑，自定义的active类和Accordion的展开状态也会完全同步，不会再出现匹配失效的问题。

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