带有反应和验证器的 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 在我的验证器中 错误对象 在 return 语句中时，我很清楚我的错误告诉我的电子邮件地址是不一样。

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

我可能做错了，但我不明白是怎么回事以及为什么。

有什么帮助吗？

Answer 1

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

在你的情况下：你的字段“电子邮件”应该在 props: meta: {error: 'The two email addresses are not the same'}

你确定这没有发生吗？

你检查了吗official docs sample?

根据 Field docs 的说法，我了解到您只能在 Field 级别访问它

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.

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

Redux form with react and validators

javascript

reactjs

redux

redux-form