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 端点将按预期调用，但当它在数据库中发现重复名称时，表单中不会出现错误。

这可能是某种回调问题，但我认为 axios 调用中的 then 会解决这个问题。

Answer 1

嘿，兄弟，我认为代码的挑战在于 validateNameUnique 函数返回一个布尔值，但 validateItemCreation 函数返回一个错误字符串。您可以更改 validateNameUnique 函数，使其在名称已存在时返回错误字符串，在不存在时返回未定义。

我想也许可以将 async 关键字添加到 validateItemCreation 函数中，以便您可以在函数内部使用 await 关键字。

此外，我非常确信通过从 validateNameUnique 函数调用 API，将需要使用 await 并确保该函数被声明为异步。

无论如何这是更新的代码，

我使用 async/await 语法代替更简单的方法

const validateNameUnique = async (enteredName) => {
  const response = await axios(withAuth({ url: `${API_URL}/names/${enteredName}` }));
  return response.data.length > 0 ? 'Class Name already exists' : undefined;
};

const validateItemCreation = async (values) => {
  const errors = {};
  if (!values.name) {
    errors.name = 'Class Name is required';
  } else {
    const nameError = await validateNameUnique(values.name);
    if (nameError) {
      errors.name = nameError;
    }
  }
  // ... other validation logic ...
  return errors;
};

此代码简化了 validateNameUnique 函数以返回错误字符串或未定义（如果名称已存在）。 validateItemCreation 函数简化了名称字段验证逻辑，以检查名称是否存在，发出 API 请求，如果存在则获取错误信息。

希望这对你有帮助，对你有帮助。