添加React-Bootstrap Modal时出现useState读取null属性错误求助

出现这个错误大概率是React和React Bootstrap版本不兼容导致的——React Bootstrap的Modal组件内部会使用Hooks，如果版本不匹配，就会触发这类读取null的useState错误。下面是具体排查和解决步骤：

• 第一步：检查版本兼容性
  打开项目的package.json，查看react、react-dom、react-bootstrap的版本：

  • React Bootstrap v2.x 要求 React 16.8.0+（支持Hooks的最低版本）
  • React Bootstrap v3.x 要求 React 18+
    如果你的React版本是17，却安装了v3.x的React Bootstrap，就会触发这个错误。

• 第二步：调整版本匹配
  根据你的React版本重新安装对应版本的依赖：

  • 若React是17：

    npm install react-bootstrap@2.9.0 bootstrap@5.3.0
    

  • 若React是18：

    npm install react-bootstrap bootstrap
    

• 第三步：确保导入Bootstrap CSS
  在项目入口文件（比如index.js或App.js）中添加Bootstrap样式导入：

  import 'bootstrap/dist/css/bootstrap.min.css';
  

  虽然这不是触发Hooks错误的直接原因，但缺失样式可能引发组件渲染异常，补上更稳妥。

• 第四步：修复Modal内的按钮（可选）
  把Modal.Footer里的原生<button>换成React Bootstrap的<Button>组件，避免原生元素和组件库冲突：

  import { Modal, Button } from "react-bootstrap";
  // ...
  <Modal.Footer>
    <Button variant="secondary" onClick={() => setShowModal(false)}>Close</Button>
  </Modal.Footer>
  

• 第五步：清除缓存重启服务
  如果调整版本后仍有问题，试试清除缓存并重启开发服务器：

  rm -rf node_modules package-lock.json
  npm install
  npm start --reset-cache
  

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