redux-form

Question

当我尝试导航到登录表单时，我在控制台中收到以下错误：

Uncaught Error: `mapDispatchToProps` must return an object. Instead received function () {
              return computedActions;
            }.
    at Object.invariant [as default] (bundle.js:21392)
    at computeDispatchProps (bundle.js:19996)
    at new Connect (bundle.js:20049)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:7346)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (bundle.js:1536)
    at Object.mountComponent (bundle.js:5728)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:7423)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (bundle.js:1536)
    at Object.mountComponent (bundle.js:5728)
    at ReactDOMComponent.mountChildren (bundle.js:14298)

这是有问题的文件 (signin.js):

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';

class Signin extends Component {
    handleFormSubmit({email, password}) {
        console.log( email, password );
    }

    render() {

        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>
        )
    }
}

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

在我为 redux-form 添加代码之前，视图 "signin.js" 工作正常。以下是我使用的 react、redux、redux-form 的版本：

"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "4.0.0",
"react-router": "^2.0.1",
"redux": "^3.0.4",
"redux-form": "^6.6.3"

Answer 1

我觉得这里有问题

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

您正在向 handleSubmit 提供一个函数作为参数，该函数返回一个值 onSubmit

试试这个

class Signin extends Component {

    render() {

        const {handleSubmit, fields: {email, password}} = this.props;

        return (
            <form onSubmit={handleSubmit}>
                <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>
        )
    }
}

并且在 parentComponent 中，您将拥有像

这样的 handleSubmit 函数

handleSubmit = ({email, password}) => {
    console.log(email, password);   //Do what you want with values here
}

Answer 2

Redux-form v6 不支持配置属性 fields，它在以前的版本中被支持。要创建字段，您应该使用组件 Field, FieldArray or Fields.

看看文档，http://redux-form.com/6.6.3/docs/api/

redux-form - Uncaught Error: `mapDispatchToProps`

redux-form - Uncaught Error: `mapDispatchToProps`

javascript

reactjs

redux