反应引导程序 - 无效的钩子调用 - React bootstrap

我正在ReactJS一起使用Bootstrap来学习后者。

我想在我的应用程序中播放引导导航栏。

我的代码如下：

应用.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;

索引.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>

索引.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'));

但我得到：

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

我做了一些研究，人们建议错误是由不同版本的 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 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;

我认为错误来自那行

反应引导程序 - 无效的钩子调用

相关内容

最新更新

热门标签：