Redux-表单验证只进行一次。

Question

我刚开始使用redux表单，我遵循了下面这个简单的示例：http://redux-form.com/6.0.5/examples/syncValidation/

我做了它说的所有事情，但出于某种原因，我传递的验证函数在表单创建时只被调用一次，并且当值被更改时它不会调用。

这是我的代码：

减速机：

import { combineReducers } from 'redux-immutable';
import { reducer as formReducer } from 'redux-form/immutable';

export const appReducers = combineReducers({
    form: formReducer
});

我的表格：

import React, { PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
import TextField from 'react-mdl';

class Form extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: Map({
                id: '',
                name: ''
            })
        };

        this.onIdChange = this.onIdChange.bind(this);
        this.onNameChange = this.onNameChange.bind(this);
    }

    onIdChange(event) {
        // change the id in the user.
    }

    onNameChange(event) {
        // change the name in the user.
    }

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

        return (<form onSubmit={handleSubmit}>
                <Field name='id'
                    label='id'
                    component={TextField}
                    onChange={this.onIdChange}
                    value={this.state.user.get('id')} />
                <Field name='name'
                    label='name'
                    component={TextField}
                    onChange={this.onNameChange}
                    value={this.state.user.get('name')}/>
            </form>);
    }
}

const validate = values => {
    const errors = {};

    if (!values.id) {
        errors.id = 'Required';
    }

    if (!values.name) {
        errors.name = 'Required';
    }

    return errors;
}

export default reduxForm({
    form: 'userForm',
    validate
})(Form);

Answer 1

1. 如果您使用的是不可变的导入import { reducer as formReducer } from 'redux-form/immutable';作为还原器。您还应该对实际的表单导入使用相同的方法，如：import { Field, reduxForm } from 'redux-form/immutable';
2. 如果这不能解决问题，我认为onChange和您定义的自定义处理程序(OnNameChange)有问题，它们正在改变内部状态。
3. 还请记住始终将{...input}从道具传递到您的自定义输入组件(它包括redux-form onChange，.所需)。像这样：const renderField = ({ input, label, type }) => ( <div> <label>{label}</label> <div> <input {...input} placeholder={label} type={type}/> </div> </div> )

Answer 2

我知道这不是最初的询问者的问题，但是如果有人在使用redux-form/immutable时遇到同样的问题，请确保以不可变的数据类型访问您的验证函数中的values，例如使用.get()方法而不是普通的点表示法。看起来很简单，但是如果您遵循文档中的示例，则很容易被忽略。