带有反应和验证器的 Redux 表单

Question

我是第一次使用 redux 表单，但在处理同步验证器时遇到了一些麻烦。

实际上，我有以下组件：

import React, {Component, PropTypes} from 'react';
import {Field} from 'redux-form';
/**
 * The SignupForm class definition
 */
export default class SignupForm extends Component {
    /**
     * The SignupForm props type
     */
    static propTypes = {
        handleSubmit: PropTypes.func,
    }

    /**
     * Render the SignupForm
     */
    render() {
        console.log(this.props); // nothing available concerning the error
        const {
            handleSubmit
        } = this.props;
        return (
            <form onSubmit={handleSubmit}>
                <Field name="email" component="input" required placeholder="Email" type="text"/>
                <Field name="emailConfirmation" component="input" required placeholder="Confirm your email" type="text"/>
                <Field name="password" component="input" required placeholder="Password" type="password"/>
                <Field name="passwordConfirmation" component="input" required placeholder="Confirm your password" type="password"/>
                <button type="submit" className="signup">Signup</button>
            </form>
        );
    }
}

还有以下验证器：

export default ({email, emailConfirmation}) => {
    const errors = {
        email: null
    };

    if (email !== emailConfirmation) {
        errors.email = 'The two email addresses are not the same';
    }
    console.log(errors); // the error is here
    return errors;
};

并使用 reduxForm 函数映射 redux 表单和验证器：

import SignupForm from './../../components/signupForm/signupForm';
import validate from './signupForm.validators';
import {reduxForm} from 'redux-form';
export default reduxForm({
    form: 'signup',
    validate
})(SignupForm);

我的问题

当我 console.log 在我的验证器中返回语句中的 errors 对象 时，我很高兴我的错误告诉我我的电子邮件地址不一样。

但是当我在我的组件中 console.log this.props 时，我可以看到一个带有一些 redux-form 属性和方法的对象，但是错误对象是未定义的。

我可能做错了，但我不知道怎么做以及为什么。

有什么帮助吗？

Answer 1

当您的验证函数被调用时，您正在创建一个对象“错误”并返回它，因此 redux-form 将使用它来将错误注入相应的字段。

在您的情况下：您的字段“电子邮件”应该进入道具：元：{错误：'两个电子邮件地址不相同'}

你确定这不会发生吗？

你查过official docs sample?

根据Field docs，我知道您只能在现场级别访问它

meta.error : 字符串 [可选]

如果该字段的值未通过验证，则该字段的错误。同步、异步和提交验证错误将在此处报告。