在 react-admin 中使用服务器端验证响应

Question

在我的应用程序中，使用 react-admin 我有几个表单，必须在服务器端执行验证。我的 API(使用 API 平台实现(返回一个 400 响应，其正文中包含一个键，其中包含一组约束冲突，键为字段名称，因此该信息用于提供逐字段错误消息。

这个问题与这个老问题中的探讨相同。但是，由于 react-admin 从 redux-form 转变为 react-final-form，基于错误传奇的解决方案不再有效。

官方 react-final-form 文档中给出的示例不容易应用，因为 react-admin 自行管理onSubmit属性。

Answer 1

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

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

下面是参考代码和示例。 它有效！！ 注意：将服务器端验证替换为您自己的验证。 我已经按照这种模式将反应管理员验证与 YUP 服务器端验证一起使用。

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

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

例：

首先使示例所需的帮助程序函数

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!";
}
});

最后把它连接到你的领域：

const validateUserName = [required((， maxLength(10(， abbrevUnique];

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

Answer 2

React 管理员纯粹是基于客户端的应用程序，我理解您的担忧。您需要运行节点服务器，并在节点服务器内部运行反应管理员。

请看一看 https://www.twilio.com/blog/react-app-with-node-js-server-proxy

您可以提及特定路由并运行节点脚本以进行服务器验证。