React Bootstrap使用Accordion.Toggle报type is invalid错误求助

报错原因 #

你使用的react-bootstrap@2.0.0-rc.0版本对Accordion组件API做了不兼容升级，移除了Accordion.Toggle、Accordion.Collapse两个子组件的导出，导致组件渲染时读取到undefined，触发类型无效报错。

修复方案 #

方案1：适配新版API（推荐，匹配你项目依赖的Bootstrap 5版本） #

将原Accordion部分的代码替换为新版语法，你原先的active状态控制逻辑完全可以复用，仅需要调整组件嵌套结构：

<Accordion activeKey={active}>
  {!markerDetails?.length && (
    <div style={{ color: "#a7a7a7" }}>
      No alert details to view
    </div>
  )}
  {markerDetails?.map((marker, idx) => (
    <Accordion.Item 
      key={marker.mID} 
      eventKey={marker.mID}
      as={ListGroup}
      variant="flush"
    >
      <Accordion.Header
        as={ListGroup.Item}
        action
        onClick={() => toggleActive(marker.mID)}
        style={{
          backgroundColor: "rgb(10, 10, 10)",
          color: "#a7a7a7",
          borderBottom: "1px solid #494949",
          display: "grid",
          gridTemplateColumns: "10% 20% 70%",
        }}
      >
        <div>{idx + 1}.</div>
        <div>{timersToString(marker.timestampSec)}</div>
        <div
          style={{
            whiteSpace: "nowrap",
            textOverflow: "ellipsis",
            overflow: "hidden",
          }}
        >
          {marker.msg}
        </div>
      </Accordion.Header>
      <Accordion.Body
        as={ListGroup.Item}
        style={{
          textAlign: "justify",
          textJustify: "inter-word",
          backgroundColor: "rgb(10, 10, 10)",
          color: "#a7a7a7",
          border: "1px solid #494949",
          borderTop: "none",
        }}
      >
        <b>Message</b> <br />
        {marker.msg} <br />
        <div style={{ paddingTop: "7px", textAlign: "right" }}>
          <Button
            variant="secondary"
            onClick={() => {
              setActive("");
              // seekToNewMarker(marker.timestampSec);
            }}
            size="sm"
          >
            View alert
          </Button>
        </div>
      </Accordion.Body>
    </Accordion.Item>
  ))}
</Accordion>

同时建议给markerDetails加兜底值，避免空值报错：

const markerDetails = sessionIDDetails[0]?.Markers || []

方案2：降级react-bootstrap版本 #

如果不想修改现有代码，可以将react-bootstrap降级到1.x稳定版，执行安装命令即可：

npm install react-bootstrap@1.6.7

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