验证异步多个字段 redux-form答案

【问题标题】：Validate async multiple fields redux-form验证异步多个字段 redux-form
【发布时间】：2019-07-08 01:04:36
【问题描述】：

我正在尝试使用我的 express-app 验证用户名和电子邮件，但是在 asyncValidate 方法上，当我验证一个时，另一个错误状态消失了。

const asyncValidate = (values, dispatch, props, field) => {
    if (field === 'username') {
        const url = config.dev_api_url + `/validation/username/${values.username}`
        return axios.get(url).then(res => {
            if (res.data.username === true) {
                throw { username: 'Already exists' }
            }
        })
    } else if (field === 'email') {
        const url = config.dev_api_url + `/validation/email/${values.email}`
        return axios.get(url).then(res => {
            if (res.data.email === true) {
                throw { email: 'Already exists' }
            }
        })
    }
}

这是我渲染输入错误的函数。

renderInput = form => {
    let fieldClasses = 'field fluid'
    let inputClasses = 'ui fluid input '
    let messageType = ''
    let messageContent = ''
    let iconType = ''
    if (form.meta.error && form.meta.touched) {
        messageType = 'error'
        messageContent = form.meta.error
        fieldClasses += ' error'
        inputClasses += ' icon'
        iconType = 'error'
        if (form.meta.error === 'password_error') {
            messageContent = (
                <em>
                    <b>1 Uppercase</b> letter <br />
                    <b>1 Lowercase</b> letter <br />
                    <b>1 Number</b> <br />
                    At least <b>8 characters</b> long <br />
                </em>
            )
        }
    } else if (form.meta.touched) {
        inputClasses += ' icon'
        iconType = 'success'
    }
    return (
        <div className={fieldClasses}>
            <label>{form.label}</label>
            <div className={inputClasses}>
                <input {...form.input} autoComplete="off" type={form.type} placeholder={form.placeholder} />
                {this.renderIcon(iconType)}
            </div>
            {this.renderMessage(messageType, messageContent)}
        </div>
    )
}

当我抛出一个新错误时，另一个错误就会消失。这是一些图片。

【问题讨论】：

您图片的第一个链接让我访问被拒绝。能否请您发送可访问的链接，以便我可以再次编辑您的帖子？
drive.google.com/open?id=11K_QHG_c_YhweyrNiZ-cFdvyUP35Kefj
那是一个包含三张图片的文件夹
请在您设置错误隐藏/显示代码的位置显示您的组件代码
是的，请稍等。

标签： reactjs redux redux-form

【解决方案1】：

我找到了一种不太脏的方法——以防万一有人需要使用 redux-form：

const asyncValidate = ( values, dispatch, props, field ) => {
    let validationPromises = [
        {
            field: "field1",
            request: axios.get(`validationUrl1/${values.field1}`),
            error: "Error message 1"
        },
        {
            field: "field2",
            request: axios.get(`validationUrl2${values.field2}`),
            error: "Error message 2"
        }
    ]

    let promisesResolved = validationPromises.map(promise => promise.request.catch(error => ({ error })));

    return axios.all(promisesResolved).then(
        (args) => {
            let errors = {};
            args.forEach( (r, idx ) => {
                if(!r.error){
                    errors[validationPromises[idx].field] = validationPromises[idx].error
                }
            })
            if(Object.keys(obj).length > 0){
               throw errors
            }
        }
    )
  }

【讨论】：

【解决方案2】：

这将是简短的。

用 Redux-Form 做这件事很麻烦，所以我最好使用 Formik，更轻，只处理必要的事情，除非你需要 redux-form 的某些功能，否则这是要走的路。

https://jaredpalmer.com/formik/docs/overview

【讨论】：

您可以将函数传递给每个字段，以便验证它（它接受承诺）。