Ошибка: неверный вызов ловушки при использовании с redux - PullRequest
Новая
       5

Ошибка: неверный вызов ловушки при использовании с redux

0 голосов
/ 20 апреля 2020

Извините, если я задаю вопрос начального уровня. Я новичок в React. js, и недавно я пытался понять концепции, следуя этому уроку: Just Django

То, что я пытаюсь выполнить sh, это При создании формы входа в систему, в которой для хранения состояний используется избыточность, мой код выглядит следующим образом: 

import React from 'react';
import { Form, Icon, Input, Button, Spin } from 'antd/lib';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import * as actions from '../store/actions/auth';

const FormItem = Form.Item;
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;


class NormalLoginForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.onAuth(values.userName, values.password);
        this.props.history.push('/');
      }
    });
  }

  render() {
    let errorMessage = null;
    if (this.props.error) {
        errorMessage = (
            <p>{this.props.error.message}</p>
        );
    }

    const { getFieldDecorator } = this.props.form;
    return (
        <div>
            {errorMessage}
            {
                this.props.loading ?

                <Spin indicator={antIcon} />

                :

                <Form onSubmit={this.handleSubmit} className="login-form">

                    <FormItem>
                    {getFieldDecorator('userName', {
                        rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                    )}
                    </FormItem>

                    <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                    )}
                    </FormItem>

                    <FormItem>
                    <Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
                        Login
                    </Button>
                    Or 
                    <NavLink 
                        style={{marginRight: '10px'}} 
                        to='/signup/'> signup
                    </NavLink>
                    </FormItem>
                </Form>
            }
      </div>
    );
  }
}

const WrappedNormalLoginForm = Form.useForm()(NormalLoginForm);

const mapStateToProps = (state) => {
    return {
        loading: state.loading,
        error: state.error
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onAuth: (username, password) => dispatch(actions.authLogin(username, password)) 
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(WrappedNormalLoginForm);

В трассировке об ошибке показано, что ошибка исходит от: 

 76 | const WrappedNormalLoginForm = Form.useForm()(NormalLoginForm);
  77 | 
  78 | const mapStateToProps = (state) => {
  79 |     return {

Некоторые поиски в Google эта конкретная ошибка показывает, что эта ошибка имеет отношение к определению хуков в классифицированном компоненте, однако я не понимаю, почему: 

const mapStateToProps = (state) => {......

считается хуком

Будет очень ценю чью-либо помощь!

1 Ответ

1 голос
/ 20 апреля 2020

Реактивные крючки используются только функциональными компонентами. Вы использовали компоненты класса.

Вкратце, Form.useForm() В методе используются только функциональные компоненты, вы можете прочитать его по этой ссылке ниже:

https://ant.design/components/form/

...