在 react-admin 的编辑表单上发生服务器 400 错误后，有没有办法防止表单状态被重置？

Question

我有一个 Edit 组件，其中包含已设置为 pessimistic 模式的 TabbedForm。我还在使用基于 react-admin 的简单 rest 提供程序的自定义数据提供程序。

<Edit
      title="Edit entity"
      mutationMode="pessimistic"
      {...props}
    >
      <TabbedForm>
        <FormTab label="Details">
          <TextInput source="name" />
        </FormTab>
      </TabbedForm>
</Edit>

API 中有一个验证规则可确保不存在另一个同名实体。

当此验证失败时，服务器 returns 一条 400 错误消息。我已将其设置为在 toast 中显示此错误并且工作正常。

我遇到的问题是，当出现 400 错误响应时，整个表单状态都会重置，因此用户在表单上取得的所有进展都将丢失。例如，如果 name 字段的原始值为“实体 A”，我将其更改为“实体 B”并提交表单，API 发现已经有一个实体具有该name，returns 返回错误，然后将 name 字段重置回“实体 A”。如果此表单上还有其他字段，它们也会全部重置回原始状态。

似乎有另一个 HTTP 请求被发送到 API 以在 400 响应返回后再次通过 ID 获取实体（即数据提供者上的 getOne 方法是再次被呼叫）。

有没有办法防止在服务器收到 400 响应后重置表单状态？

我在想另一种解决方案是通过使用客户端验证来防止返回 400 错误 - 也许通过添加执行 API 请求的自定义验证器来检查是否有实体那个名字。

Answer 1

我找到了一种方法，通过覆盖 onFailure 行为来防止提交失败后刷新表单。

const onFailure = (error: any) => {
    notify(
      typeof error === "string"
        ? error
        : error.message || "ra.notification.http_error",
      { type: "warning" }
    );
  };

我只按照 react-admin 文档中的描述将逻辑发送到 refresh() 页面。

参考：https://marmelab.com/react-admin/CreateEdit.html#onfailure

在 react-admin 的编辑表单上发生服务器 400 错误后，有没有办法防止表单状态被重置？

Is there a way to prevent form state being reset after server 400 error on an Edit form in react-admin?

react-admin