redux-form，如果使用返回函数，验证会中断

Question

我正在使用 redux 表单并想要自定义验证消息。

我在这里使用了他们的示例验证项目： https://codesandbox.io/s/PNQYw1kVy

按原样，它按预期工作。如果我从

更改必填字段的验证函数

const required = value => value ? undefined : 'Required'

到

const required = message => value => value ? undefined : message || 'Required'

并更改姓名和电子邮件的验证定义

validate={[ required ]}

到

validate={[ required('Message') ]} 或 validate={[ required(null) ]}

然后它不处理验证。

为什么会这样？据我了解，如果我们有 const myFunc = val => val 和 const myFunc2 = () => val => val，那么 [myFunc, myFunc2()] 将导致 2 个功能相同的函数的数组。

Answer 1

不要使用包装在另一个函数中的验证函数，每次呈现表单时都会构造一个新函数，这将导致字段重新呈现（因为this.props.validate !== nextProps.validate）。（检查这个issue on github)

您可以使用具体定义的参数化验证规则实例：

const required = value => value ? undefined : 'Required';
const requiredMessage = required('Message');

<Field
    name="username"
    type="text"
    component={renderField}
    label="Username"
    validate={requiredMessage}
/>

此外，这也是表单组件中定义的验证函数不起作用的原因。

const FormComponent = (props) => {
    const {handleSubmit, submitting} = props;
    const required = value => value ? undefined : 'Required'; //this will not work!!!

    return <form onSubmit={handleSubmit}>
        <Field
            name='username'
            type='text'
            component={renderField}
            label='Username'
            validate={required}
        />
        <div>
            <button type="submit" disabled={submitting}>Submit</button>
        </div>
    </form>;
};

redux-form，如果使用返回函数，验证会中断

redux-form, validation breaks if using returned function

javascript

ecmascript-6

redux-form