React bootstrap - 无效的钩子调用答案

【问题标题】：React bootstrap - Invalid hook callReact bootstrap - 无效的钩子调用
【发布时间】：2020-02-08 00:36:08
【问题描述】：

我使用Bootstrap 和ReactJS 来学习后者。

我想在我的应用中显示一个引导导航栏。

我的代码如下：

app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";

function App() {
  return (
    <div className="App">

      <Navbar bg="dark" variant="dark">
        <Navbar.Brand href="#home">
          <img
            alt=""
            src="####"
            width="30"
            height="30"
            className="d-inline-block align-top"
          />
        // {' React Bootstrap'}
        </Navbar.Brand>
      </Navbar>

    </div>
  );
}

export default App;

index.html

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
    crossorigin="anonymous">
    <!-- BOOTSTRAP -->
    <link rel="apple-touch-icon" href="logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>My app</title>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
    crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
    integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
    crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
    integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
    crossorigin="anonymous"></script>
  </body>
</html>

index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

但我明白了：

无效的挂钩调用。 Hooks 只能在函数组件内部调用

我做了一些研究，人们认为该错误是由不同版本的 React 引起的。所以我运行npm ls react，但我只得到一个版本：

myapp-frontend@0.1.0 /Desktop/myapp-frontend
└── react@16.10.2

按照评论中的建议，如果我运行 npm ls react-dom，我会得到：

myapp-frontend@0.1.0 /Desktop/myapp-frontend
└── react-dom@16.10.2

【问题讨论】：

不是react 的不同版本，而是react-dom 的不同版本。运行npm ls react-dom 进行验证。它必须是 >=16.8.0 并且应该与您的 react 版本匹配。
谢谢，我还有一个版本：myapp-frontend@0.1.0 myapp-frontend └── react-dom@16.10.2
你在哪里得到这个错误？您能否发布完整的错误堆栈跟踪，以指出引发此类错误的原因

标签： javascript reactjs ecmascript-6 react-bootstrap

【解决方案1】：

你能把它从你的代码中删除吗

// {'React Bootstrap'}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";

function App() {
  return (
    <div className="App">

      <Navbar bg="dark" variant="dark">
        <Navbar.Brand href="#home">
          <img
            alt=""
            src="####"
            width="30"
            height="30"
            className="d-inline-block align-top"
          />
        </Navbar.Brand>
      </Navbar>

    </div>
  );
}

export default App;

我认为错误来自该行

【讨论】：

正如错误已经指出的那样，您只能在功能组件中使用钩子而不是类组件
我不使用它，我发布的所有内容都是我的应用程序。我启动了一个新的 react 应用程序，并将您看到的代码添加到其中。因此它里面没有其他代码。
您可以尝试删除 Navbar.Brand 标签吗？如果这不起作用，您可以在 github 中为我分享您的代码吗？