如何在React-Admin的Edit/Create组件中通过onFailure展示服务端校验错误

1. 检查dataProvider的错误转换逻辑 #

react-admin要求自定义dataProvider在接口请求报错时，需要将服务端返回的完整响应体作为第三个参数传入HttpError构造函数，示例错误处理逻辑如下：

// dataProvider中处理请求响应的代码片段
if (response.status >= 400 && response.status < 600) {
  const responseBody = await response.json();
  // 三个参数分别为：错误提示、状态码、服务端返回的完整响应体
  throw new HttpError(responseBody.message || '请求错误', response.status, responseBody);
}

如果这一步没有传入响应体，后续的onFailure回调自然拿不到服务端返回的错误内容。

2. 修改onFailure回调自定义通知内容 #

使用react-admin自带的useNotify钩子，从HttpError实例的body属性中提取服务端返回的错误信息，拼接后展示即可：

import { useRefresh, useNotify } from 'react-admin';

export const MyEdit = (props) => {
  const refresh = useRefresh();
  const notify = useNotify();

  const onFailure = (error) => {
    const errorBody = error.body || {};
    let errorMsg = '请求失败，请稍后重试';
    const errorTextList = [];
    // 按你服务端返回的格式拼接错误信息
    Object.keys(errorBody).forEach(field => {
      if (Array.isArray(errorBody[field])) {
        errorTextList.push(`${field}：${errorBody[field].join('、')}`);
      }
    })
    if (errorTextList.length) {
      errorMsg = errorTextList.join('\n');
    }
    // 弹出错误通知
    notify(errorMsg, { type: 'warning' });
    refresh();
  };

  return (
    <Edit
      onFailure={onFailure}
      {...props}
    >
      <SimpleForm>
        <TextInput
          source="full_name"
          fullWidth
        />
        <TextInput
          source="email"
          fullWidth
        />
      </SimpleForm>
    </Edit>
  );
};

3. 修复HttpError类的冗余代码（可选） #

你找到的HttpError实现里有一行多余代码，会覆盖之前生成的堆栈信息，同时导致控制台打印error时看不到自定义的message、body、status属性，直接删除即可：

// 删掉构造函数中最后这行赋值代码
// _this.stack = new Error().stack;

内容的提问来源于stack exchange，提问作者zetoune