在React类组件中使用react-bootstrap Offcanvas出现无效Hook调用错误如何解决

报错原因 #

react-bootstrap的Offcanvas组件内部使用了React Hooks实现相关逻辑，而Hooks只能在函数组件的顶层调用，类组件中直接渲染Offcanvas就会触发该报错，不属于配置遗漏问题。

解决方案 #

方案1：将MyCanvas改为函数组件（推荐，改动最小） #

直接改成函数组件即可适配Offcanvas的Hook调用要求，还可以简化冗余的状态逻辑：

import { useState, useEffect } from "react";
import Offcanvas from "react-bootstrap/Offcanvas";

export default function MyCanvas(props) {
  const [show, setShow] = useState(false);

  useEffect(() => {
    setShow(true);
  }, []);

  const handleClose = () => {
    setShow(false);
  };

  return (
    <div>
      <Offcanvas
        show={show}
        onHide={handleClose}
        {...props}
      >
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>{props.report_desc}</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text or other component goes here...
        </Offcanvas.Body>
      </Offcanvas>
    </div>
  );
}

提示：你当前逻辑里父组件已经传递了show属性，完全可以直接使用父组件的状态来控制显隐，不需要在MyCanvas内部再维护独立的show状态，能进一步简化代码

方案2：必须保留MyCanvas为类组件的适配方案 #

先封装一个透传所有属性的函数组件包裹Offcanvas，再在类组件中引入使用：
首先新建OffcanvasWrapper.js：

import Offcanvas from "react-bootstrap/Offcanvas";

export default function OffcanvasWrapper(props) {
  return <Offcanvas {...props} />;
}

然后修改MyCanvas.js里的引入路径，把原来引入react-bootstrap/Offcanvas改成引入自己写的OffcanvasWrapper，其余代码保持不变即可。

其他现存问题修复 #

你的代码还有几处会导致运行错误的问题需要同步修改：

1. App.js中clickHandler没有绑定this，调用时会找不到setState，修改方式有两种：
   • 构造函数里绑定：this.clickHandler = this.clickHandler.bind(this)
   • 直接把方法定义为箭头函数：clickHandler = (report_id, report_desc) => { ... }
2. Cards.js中没有引入Card和Button组件，需要加上导入语句：import { Card, Button } from "react-bootstrap";
3. Cards.js中Card的onClick绑定逻辑错误，没有传递对应的report_id和report_desc，修改为：

   onClick={() => this.props.clickHandler(i.report_id, i.report_desc)}
   

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