通过 API 调用在 React-Admin 中进行全局表单验证

Question

在我的 React-Admin 应用程序中，我正在使用全局表单验证。

它主要按预期工作。按照docs。我给 SimpleForm validate prop 一个函数，它将记录作为输入并返回一个包含由字段索引的错误的对象。

但是对于其中一个字段，我需要进行一个简单的api调用来检查输入的值是否已经存在于数据库中。如果它确实，我只是想返回一个表单字段错误，以便用户知道输入一个不同的、唯一的名称。

有没有人遇到过这个用例并让它工作？

这是我到目前为止的代码：

const validateNameUnique = (enteredName) => {
  axios(
    withAuth({url: `${API_URL}/names/${enteredName}`})
  ).then(({ data }) => {
    if (data.length > 0) { return true; }});
  return false;
};

const validateItemCreation = (values) => {
  const errors = {};
  if (!values.name) {
    errors.name = 'Class Name is required';
  }
  if (values.name) {
    if (validateNameUnique(values.name)) {
      errors.name = validateNameUnique(values.name);
    }
  }
  ...
  return errors;
};

const ItemCreate = () => {
  return (
      <Create>
        <SimpleForm validate={validateItemCreation}>
          <TextInput source="name" />
          // other form fields ...
        </SimpleForm>
      </Create>
    </>
  );
};

当用户输入名称值时，api 端点将按预期调用，但当它在数据库中发现重复名称时，表单中不会出现错误。