javascript - 带有反应和验证器的 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返回语句上的错误对象时，我很高兴收到错误消息，表明我的电子邮件地址不相同。

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

我可能会做错事，但我不明白如何以及为什么。

有什么帮助吗？

Answer 1

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

在你的情况下:你的字段“电子邮件”应该进入 props: meta: {error: '这两个电子邮件地址不相同'}

您确定这不会发生吗？

你查过official docs sample?吗？

根据Field docs我知道您只能在字段级别访问它

meta.error : String [optional]

The error for this field if its value is not passing validation. Both synchronous, asynchronous, and submit validation errors will be reported here.