Redux-Form - 验证只发生一次答案

【问题标题】：Redux-Form - validation happens only onceRedux-Form - 验证只发生一次
【发布时间】：2016-09-26 06:19:57
【问题描述】：

我是 redux-form 的新手，我遵循了这个简单的例子：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);

【问题讨论】：

标签： reactjs redux-form

【解决方案1】：

如果您使用的是不可变导入 import { reducer as formReducer } from 'redux-form/immutable'; 为减速机。您还应该对实际的表单导入使用相同的内容，如下所示： import { Field, reduxForm } from 'redux-form/immutable';
如果这不能解决问题，我认为 onChange 和您定义的正在更改内部状态的自定义处理程序 (onNameChange) 有问题。
还记得始终将 {...input} 从 props 传递到您的自定义输入组件（它包括 redux-form onChange，...需要）。像这样： const renderField = ({ input, label, type }) => ( <div> <label>{label}</label> <div> <input {...input} placeholder={label} type={type}/> </div> </div> )

【讨论】：

您好，我尝试从 redux-form/immutable 导入 Field 和 reduxForm 还是不行，我还去掉了 onChange 和 value 绑定，还是不行。
在 Redux-dev-tools 中输入表单的任何字段时，您是否看到 redux-form/CHANGE 被调度？还看到redux-form/UPDATE_SYNC_ERRORS 意味着错误消息也被发送，但显示它有问题。
我看到 redux-from/UPDATE_SYNC_ERRORS 首先被分派一次，然后 redux-form/REGISTER_FIELD 被分派两次，仅此而已。当我输入任何内容时，都不会发送任何内容
如果你没有得到 redux-form/CHANGE 完全删除 onChange 和 value 道具，因为它实际上是不需要的，redux-form 将道具传递给你的自定义组件。无需为受控输入设置状态，表单中的所有值都在 redux 单一存储中。我认为您的问题是覆盖 redux-form 的 onChange 处理程序，因此它不会调度 redux-form/CHANGE。没有新值 = 在表单初始值之后没有新的需要再次验证。
所以我删除了 onChange 和 value 但什么也没发生，所以我尝试用常规输入替换文本字段并且它有效，所以我的组件可能有问题。谢谢

【解决方案2】：

我知道这不是最初的提问者的问题，但如果有人在使用 redux-form/immutable 时遇到同样的问题，请务必在验证函数中将 values 访问为不可变数据类型，例如使用.get() 方法而不是普通的点表示法。看起来很简单，但如果您按照文档中的示例进行操作，很容易错过。

【讨论】：