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

视图＆＃34; signin.js＆＃34;工作正常，直到我在redux-form的代码中添加。以下是我正在使用的react，redux，redux-forms的版本：

"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 - 未捕获的错误：`mapDispatchToProps`

2 个答案: