React-router-dom выдает неверную ошибку перехвата с помощью MDBbootstrap - PullRequest
Новая
       56

React-router-dom выдает неверную ошибку перехвата с помощью MDBbootstrap

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

Я использую компоненты MDBootStrap вместе с библиотекой React Router с зацепками:

Я получаю эту ошибку:

Недопустимый вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента. Это может произойти по одной из следующих причин ...

Я проверил , как предлагается в описании ошибки:

npm ls react return response@16.8.6 таким образомЯ использую только одну версию реакции, и это> 16.8.x

package.json: 

  "name": "counter-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.1.1",
    "mdbreact": "^4.21.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

RegisterPage.jsx: 

import React, { useState } from "react";
import {
  MDBNavbar,....
from "mdbreact";
import "../index.css";
const ClassicFormPage = () => {
  const [collapseID, setCollapseID] = useState("");

  const toggleCollapse = collapseID => () =>
    setCollapseID(prevState => ({
      collapseID: prevState.collapseID !== collapseID ? collapseID : ""
    }));

  const overlay = (
    <div
      id="sidenav-overlay"
      style={{ backgroundColor: "transparent" }}
      onClick={toggleCollapse("navbarCollapse")}
    />
  );

  return (
    <div id="classicformpage">
      <div>
        <MDBNavbar dark expand="md" fixed="top">
......
</MDNNavbar>
</div>
</div>
);
};

export default ClassicFormPage;

My App. js, на который я ссылаюсь в index.js, это 

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import ClassicFormPage from './components/counters';


const App = () => {
  return ( <Router >
    <
    Switch >
    <
    Route exact path = "/"
    render = {
      ClassicFormPage
    }
    />  <
    /Switch> <
    /Router>
  );
};

export default App;

. На этом этапе, если я запускаю приложение, оно прерывается с ошибкой

Если я возвращаю компонент непосредственно внутри приложения. JS работает: 

const App = () => {
  return ( 
      ClassicHomePage
    }
    />  <
    /Switch> <
    /Router>
  );
};

Я вижу это сообщение в браузере: 

invariant
E:/Practice/Mosh/counter-app/node_modules/react-dom/cjs/react-dom.development.js:57
throwInvalidHookError
E:/Practice/Mosh/counter-app/node_modules/react-dom/cjs/react-dom.development.js:13382
useState
E:/Practice/Mosh/counter-app/node_modules/react/cjs/react.development.js:1495
▲ 3 stack frames were expanded.
ClassicFormPage
http://localhost:3000/static/js/main.chunk.js:117:75
  20 | } from "mdbreact";
  21 | import "../index.css";
  22 | 
> 23 | const ClassicFormPage = () => {
  24 |   const [collapseID, setCollapseID] = useState("");
  25 | 
  26 |   const toggleCollapse = collapseID => () =>
...