Question

在没有异步的情况下，SimpleForm组件的经典验证工具允许使用错误消息将红色的无效字段标记为红色，我们只需要返回一个字段错误对象（例如：{username：'already exist！'}）< / p>

但是使用asyncValidation，我试图获得相似的结果，完成了Fetch API调用，检测到错误，但是即使我在reject（）/ resolve（）或throw（）内部返回错误的对象，函数，什么也没发生。

也许我需要手动调整商店，但我不知道如何无风险地进行。

这是源代码：

const asyncValidate = async (values, dispatch, props, field) => {
  return new Promise(async (resolve, reject) => {

    if (field === 'username') {
        const res = await fetch('/api/admin-v1/users/book/username', {
          method: 'PUT',
          body: JSON.stringify({ username: values.username }),
          headers: {"Content-type": "application/json; charset=UTF-8" }
        })
        if (res.ok) return resolve()

        const err = await res.text()
        reject({ username: err })
        // resolve({ username: err })
        // throw({ username: err })
    }

    resolve({})
  })
}

export const UserCreate = (props) => (
    <Create {...props}>
        <SimpleForm asyncValidate={asyncValidate} asyncBlurFields={['username']}>
            <TextInput source="username" />
            <TextInput source="email" type="email" />
        </SimpleForm>
    </Create>
)

Answer 1

如果您只返回获取请求并在获取请求中获取响应后抛出错误，则不会返回新的Promise，它将按预期工作。

尝试一下：

const usernameValidation = (values) => {
    if (values.username) {
        return fetch( '/user?checkusername=' + values.username).then(response => {
            if (response.status === 409) {
                var err = { username: 'That username is taken' }
                throw err
            }
        })
    }
}

export const CreateUser = props => (
<Create {...props}>
        <SimpleForm asyncValidate={usernameValidation} asyncBlurFields={[ 'username' ]}>
            <TextInput source="username"  />
 </SimpleForm>
    </Create>)

此功能与validate相同，并直接在用户名字段上显示错误。希望这会有所帮助。

如何在SimpleForm上显示带有asyncValidation的错误消息？

1 个答案: