使用 react-bootstrap 时收到无效的钩子调用警告

Question

我在使用 react-bootstrap 时遇到问题，特别是每当我尝试使用 react-bootstrap 标记（如 <Row></Row>）时，我的应用都会收到“无效的挂钩调用”错误。

我已经运行了 npm ls，这些是我目前安装的包/版本：

boostrap@4.6.0 反应引导@1.6.1 反应-dom@17.0.2 反应@17.0.2

我还在 React 文档中关注了 the advice 关于此错误的信息，并添加了日志以查看我是否有 React 的重复副本，但测试在控制台中返回“true”。

这是我项目中的 package.json 文件：

    {
  "name": "kanvaswebappr",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.1.3",
    "jquery": "^3.5.1",
    "merge": "^1.2.1",
    "oidc-client": "^1.9.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.4",
    "reactstrap": "^8.4.1",
    "rimraf": "^2.6.2"
  },
  "devDependencies": {
    "ajv": "^6.9.1",
    "cross-env": "^5.2.0",
    "typescript": "^3.7.5",
    "eslint": "^6.8.0",
    "eslint-config-react-app": "^5.2.0",
    "eslint-plugin-flowtype": "^4.6.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.3",
    "nan": "^2.14.1"
  },
  "peerDependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

如您所见，我已将 react 和 reactdom 移至 peeDependencies 中，然后运行 ​​npm install，但这也无济于事。

我的应用目前非常基础，因为我刚刚开始/学习。

我的 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './containers/App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

ReactDOM.render(
  <BrowserRouter basename={baseUrl}>
    <App />
  </BrowserRouter>,
  rootElement);

我的 App.js 文件：

import React, { Component } from 'react';
import './App.css';
import Layout from '../components/Layout/Layout';
class App extends Component {
    render() {
        return (
            <Layout>
                <strong>This content is going to be rendered as the props.children inside the Layout component.</strong>
            </Layout>
        );
    }
}
export default App;

我的 Layout.js 文件：

import React from 'react';
import Alert from 'react-bootstrap/Alert';
const layout = (props) => {
    return (
        <div>
            <div>
                This is the place for the navigation component.
            </div>
            <Alert>
                This is an alert—check it out!
  </Alert>
            <main>
                {props.children}
            </main>
        </div>
    )
}
export default layout;

如果有人能够提供帮助，我将非常感激！

Answer 1

今天早上又搞砸了一些，我自己修复了它。在这里发布，以防对其他人有用。

我正在构建我的 React 应用程序作为 asp.net 解决方案的一部分，并且在解决方案级别和我的实际 React 应用程序/项目中都有一个 node_modules 文件夹。我对这一切都很陌生，所以我想我已经设法在这两个地方安装了软件包，而且它们在安装的内容和版本号方面不同步。我在两个级别都运行了npm update 以使所有内容都保持最新状态，然后我从解决方案文件夹中运行npm link MyApp/node-modules/react 以确保 React 没有被重复（尽管我不认为它是重复的）。

现在似乎一切正常。