Question

我已经使用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;

还有我的index.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个多小时来尝试解决此问题，将所有组件都转换为功能组件，但是我没有更多的想法。

有人可以帮我吗？

好吧，我从SignIn组件中获取了所有代码，我直接将它们添加到App组件中，并且可以正常工作。

可能是路线吗？也许是导出登录的方式？

无效的挂钩调用调用函数组件

0 个答案: