使用 react-bootstrap 时出现“无效的钩子调用”错误

Question

当我用它运行应用程序时，有一个有问题的组件，我遇到一个错误：“无效的钩子调用。钩子只能在函数组件的主体内部调用......”。当我评论这个组件时，错误消失了。

组件：

import React from "react";
import { Modal } from "react-bootstrap";
import TypeCalculateModalList from "./type-calculate-modal-list";

export default function TypeCalculateModal(props) {
  return (
    <div>
      <Modal
        {...props}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Title
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <TypeCalculateModalList {...props} />
        </Modal.Body>
      </Modal>
    </div>
  );
}

父容器：

import React from "react";
import { useSelector } from 'react-redux';
import TypeCalculateModal from "./type-calculate-modal";

const TypeCalculateModalContainer = ({show, onHide}) => {
  const result = useSelector(state => state.table.result);
  const isErrorCalculateStatus = useSelector(state => state.table.error);
  const isLoadingCalculateStatus = useSelector(state => state.table.isLoading);

  return (
    <TypeCalculateModal
      show={show}
      onHide={onHide}
      result={ result }
      isLoading={ isLoadingCalculateStatus }
      error={ isErrorCalculateStatus }
    />
  );
}

export default TypeCalculateModalContainer;

标题：

import React, { useState } from "react";
import { useDispatch } from 'react-redux';
import { Link } from "react-router-dom";
import { PersonCircle } from "react-bootstrap-icons";
import ImportDataModal from "../modal/import-data-modal";
import TypeCalculateModalContainer from "../modal/type-calculate-modal-container";
import "./header.css";

export default function Header({ result, onEditTableMode }) {
  const dispatch = useDispatch();
  const [importDataModalShow, setImportDataModalShow] = useState(false);
  const [typeCalculateModalShow, setTypeCalculateModalShow] = useState(false);

  return (
    <div className="head-wrap">
      <div className="head-left">
        <div className="head-left__item">
          <button onClick={() => setTypeCalculateModalShow(true)}>Расчеты</button>
          <TypeCalculateModalContainer
            show={typeCalculateModalShow}
            onHide={() => setTypeCalculateModalShow(false)}
          />
        </div>
...

我运行“npm ls react”和“npm ls react-dom”，一切正常，只有一个react@17.0.2和一个react-dom@17.0.2

当我注释掉有问题的组件 TypeCalculateModal 时，应用程序启动时不会出现此错误，但除了路由器之外，该功能不起作用。

请帮忙，我该如何修复错误？

Package.json：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.5.1",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "json-loader": "^0.5.7",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
    "node-sass": "^4.14.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.0",
    "react-bootstrap-icons": "^1.5.0",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.3.2",
    "react-leaflet": "^3.0.0",
    "react-loader-spinner": "^4.0.0",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-select": "^4.3.1",
    "react-toastify": "^7.0.4",
    "redux-logger": "^3.0.6",
    "uuid": "^8.3.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "webpack serve",
    "build": "webpack",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.4",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.6.0",
    "postcss": "^8.2.15",
    "postcss-loader": "^5.3.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}