Uncaught TypeError: this.props.signinUser не является функцией (…)

src/actions/index.js

import axios from 'axios';
const ROOT_URL = "http://localhost:3090";

export function signinUser({ email, password }){
    return function(dispatch){
        axios.post(`${ROOT_URL}/signin`, { email, password });
        console.log("hey");
    }
}

источник/компоненты/аутентификация

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import * as actions from '../../actions';
class Signin extends Component {


    handleFormSubmit({ email, password }){
            this.props.signinUser({ email, password });

        }

    render() {
        // code
        console.log(actions)
        const { handleSubmit, fields: { email,password } } = this.props;
        return (
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
            <fieldset className="form-group">
                <label>Email:</label>
                <input {...email} className="form-control" />
            </fieldset>
            <fieldset className="form-group">
                <label>Password:</label>
                <input {...password} className="form-control" />
            </fieldset>
            <button action="submit" className="btn btn-primary">Sign In</button>

        </form>
    );
    }

    // methods
}

export default reduxForm({
    form: 'signin',
    fields: ['email',  'password']
}, null, actions)(Signin);

Я использую Redux Form для создания формы входа. Это ошибка, которую я получаю, когда нажимаю кнопку «Войти». Возможно, функция signinUser() не определена должным образом.

bundle.js:29019 Uncaught TypeError: this.props.signinUser не является функцией (…)


reactjs javascript redux redux-form
person Rishi Raj    schedule 14.12.2016    source источник
comment
Вы пытались отладить значение this.props?   -  person qxz    schedule 14.12.2016
comment
Вы определенно импортируете функцию signInUser?   -  person Paul Fitzgerald    schedule 14.12.2016

Ответы (4)


arrow_upward
13
arrow_downward

На случай, если кто-то столкнется с этим (сейчас я делаю то же самое на Udemy), это было серьезное изменение между redux-form 5.x и 6. По сути, вам просто нужно запустить его через reduxForm и подключиться, как показано на этот комментарий https://github.com/erikras/redux-form/issues/1050#issuecomment-221721848.

Конечный результат примерно такой:

Sigin = reduxForm({ form: 'sigin', fields: [ 'email', 'password' ] })(Sigin);
export default connect(null, actions)(Sigin);
person thewolff    schedule 31.01.2017

arrow_upward
6
arrow_downward

Вы можете просмотреть мой репозиторий github для тех же проблем, с которыми вы столкнулись, которые я успешно реализовал с помощью v6.5.0 redux-form здесь. Это основано на курсе Стивена Грайдера Advanced React and Redux Udemy. Если вам это нравится, поставьте звезду.

Что касается вашей текущей проблемы:

Redux Form v6 реализует несколько иную логику. Вместо fieldset вы используете Field и импортируете его вместе с вашей reduxForm:

import { reduxForm, Field } from 'redux-form';

Поскольку в новой версии нет встроенного метода подключения, вам необходимо:

import { connect } from 'react-redux';

В вашем конкретном случае остальная часть вашего кода должна быть реорганизована следующим образом:

const renderInput = field => {
    const { input, type } = field;
    return (
        <div>
            <input {...input} type={type} className="form-control" />
        </div>
    );
}

class Signin extends Component {
    handleFormSubmit({ email, password }) {    
        this.props.signinUser({ email, password });
    }

    render(){
        const { handleSubmit } = this.props;

        return (
            <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

                <div className="form-group">
                    <label>Email:</label>
                    <Field name="email" 
                        type="email" component={renderInput} />
                </div>
                <div className="form-group">
                    <label>Password:</label>
                    <Field name="password" 
                        type="password" component={renderInput} />
                </div>
                <button action="submit" className="btn btn-primary">Sign in</button>
            </form>
        );
    }
}

function mapStateToProps(state) {
    return { form: state.form };
}

Signin = connect(mapStateToProps, actions)(Signin);
Signin = reduxForm({
 form: 'signin'
})(Signin);
export default Signin;

В руководстве по миграции форм Redux вы увидите правильный новый синтаксис, который позволит вам оставаться в курсе.

person JaysQubeXon    schedule 20.02.2017

arrow_upward
2
arrow_downward

Попробуйте использовать actions.signinUser({ email, password });

person Gaurab Kc    schedule 14.12.2016

arrow_upward
1
arrow_downward

Измените свою зависимость redux-form на версию 5.3.3.

person yogeshhkumarr    schedule 07.01.2017