在 react-admin 中使用服务器端验证响应 [英] Use server-side validation response in react-admin

问题描述

在我使用 react-admin 的应用程序中，我有几个表单必须在服务器端执行验证.我的 API(使用 api-platform 实现)返回一个 400 响应，其主体中有一个键，该键包含一组违反约束的数组，以字段名称为键，因此该信息用于提供逐个字段的错误消息.

In my app using react-admin I have a few forms where the validation must be performed on the server side. My API (implemented with api-platform) returns a 400 response with a key in its body that contains an array of the constraint violations, keyed to the field names, so the information is there to provide field-by-field error messages.

此问题与 这个老问题.然而，由于 react-admin 从 redux-form 转移到 react-final-form，基于错误传奇的解决方案不再有效.

This issue is the same explored in this old question. However, since react-admin moved from redux-form to react-final-form, solutions based on an error saga do not work anymore.

官方 react-final-form 文档中给出的示例并不容易申请是因为 react-admin 自己管理 onSubmit 属性.

The example given in the official react-final-form docs is not easy to apply because react-admin manages the onSubmit property by itself.

推荐答案

所以放心！我在想 3.x 基础中没有针对 RA 的服务器端验证.不是真的！

So relieve! I was thinking there was no server side validation for RA in the 3.x base. Not true!

为 react-admin 3.8.1 找到了一个似乎运行良好的可行解决方案.

Found a working solution for react-admin 3.8.1 that seems to work well.

这是参考代码和示例.有用！！注意:将服务器端验证替换为您自己的验证.我已经按照这种模式将 react-admin 验证与 YUP 服务器端验证结合使用.

Here is the reference code and example. It works!! Note: Replace the server side validation with your own. I have used react-admin validation with YUP server side validation following this pattern.

此外，您可以在 SimpleForm 级别使用 validate 来执行整个表单验证.此示例适用于单个字段，但它们都有效.

Also, you can use validate at the SimpleForm level to do whole form validation. This example is for a single field but they both work.

https://codesandbox.io/s/wy7z7q5zx5?file=/index.js:966-979

示例:

首先根据示例的需要制作辅助函数

First make the helper functions as necessary for the example

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const simpleMemoize = fn => {
  let lastArg;
  let lastResult;
  return arg => {
    if (arg !== lastArg) {
      lastArg = arg;
      lastResult = fn(arg);
    }
    return lastResult;
  };
};

然后是实际的验证码

const usernameAvailable = simpleMemoize(async value => {
  if (!value) {
    return "Required";
  }
  await sleep(400);
  if (
    ~["john", "paul", "george", "ringo"].indexOf(value && value.toLowerCase())
  ) {
    return "Username taken!";
  }
});

最后将其连接到您的领域:

Finally wire it up to your field:

const validateUserName = [required(), maxLength(10), abbrevUnique];

const validateUserName = [required(), maxLength(10), abbrevUnique];

const UserNameInput = (props) => {
    return (
        <TextInput
            label="User Name"
            source="username"
            variant='outlined'
            validate={validateAbbrev}
        >
        </TextInput>);
}

这篇关于在 react-admin 中使用服务器端验证响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！