Недопустимый компонент функции вызова ловушки - PullRequest
Новая
       73

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

0 голосов
/ 03 августа 2020

Я создал новый проект с помощью приложения create-react-app.

Я добавил библиотеку antd (например, Material UI), я добавил Router-Dom, и у меня нет ни одного компонента класса вообще мой проект.

Я впервые использую компонент функций.

Это мой компонент функции входа в систему: 

import React, {Component} from 'react';
import { Form, Input, Button, notification, Popover, Spin, Col, Row } from 'antd';

const layout = {
    labelCol: {
       span: 8,
    },
    wrapperCol: {
       span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
},
};

const SingIn = () => {
    const onFinish = values => {
        console.log('Success:', values);
    };

    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

return(
    <Form
        {...layout}
        name={"signup"}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        >
        <Form.Item
            label="Email"
            name="email"
            rules={[{ required: true, message: 'Please input your email!' }]}
            >
            <Input/>
        </Form.Item>
    </Form>
);
}

export default SingIn;

Это мой компонент функции приложения: 

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import PublicRoute from "./components/routes/publicRoute/PublicRoute";
import SingIn from "./pages/singUp/singIn";

function App() {
  return (
      <Router>
          <Switch>
              <PublicRoute component={SingIn} path="/signin" exact />
          </Switch>
      </Router>
  );
}

export default App;

И мой индекс. js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
 import * as serviceWorker from './serviceWorker';

 import './index.css';

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

 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

Это мой компонент PublicRoute: 

import React from 'react';
import { Route } from 'react-router-dom';

const PublicRoute = ({component: Component, ...rest}) => {
return (
    <Route {...rest} render={props => (
             <Component {...props} />
    )} />
 );
 };

 export default PublicRoute;

Это ошибка: 

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See react-invalid-hook-call for tips about how to debug and fix this problem.

Моя версия реакции - это «реагировать»: «^ 16.13.1».

И предупреждение веб-пакета:

предупреждение webpack

Я потратил более 2 часов, пытаясь решить эту проблему, преобразовав все мои компоненты в компоненты функций, но у меня нет других идей.

Кто-нибудь может мне помочь?

Хорошо, я взял весь код из компонента входа в систему и добавил его непосредственно в компонент приложения, и он работает.

Могут быть маршруты? Может способ экспорта Войти?

...