React bootstrap - неверный вызов хука - PullRequest
Новая
       10

React bootstrap - неверный вызов хука

0 голосов
/ 10 октября 2019

Я использую Bootstrap с React для изучения последних.

Я хочу включить Boostrap Navbar в моем приложении.

Мой код выглядит следующим образом:

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'));

Но я получаю:

Недопустимый вызов ловушки. Хуки можно вызывать только внутри тела компонента функции

Я провел некоторое исследование, и люди предполагают, что ошибка вызвана другой версией 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

1 Ответ

0 голосов
/ 10 октября 2019

Можете ли вы удалить это из своего кода, пожалуйста

// {'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;

Я думаю, что ошибка исходит из этой строки

...