Показать ошибки проверки на стороне сервера после неудачной отправки формы

Как я могу показать сообщения проверки после неудачной отправки формы? Запрос API возвращает ответ HTTP 400 «приложение / проблема + json» и содержит нарушения в виде списка с путем к полю.

https://tools.ietf.org/html/rfc7807#section-3

{
   "type": "https://example.net/validation-error",
   "title": "Your request parameters didn't validate.",
   "invalid-params": [ 
      {
         "name": "age",
         "reason": "must be a positive integer"
      },
      {
         "name": "color",
         "reason": "must be 'green', 'red' or 'blue'"
      }
   ]
}

person Ismail Baskin    schedule 25.05.2017    source источник
comment
Вы можете найти решение? У меня точно такая же проблема   -  person Barto    schedule 03.05.2018
comment
@ChristiaanWesterbeek Я думаю, что нашел лучшее, почему с этим справиться.   -  person llioor    schedule 14.02.2019


Ответы (1)


У меня есть решение для вас, я бы рекомендовал сделать это с помощью Saga и HttpError.

Во-первых, из нашего dataProvider нам нужно выбросить HttpError следующим образом:

...
import {HttpError} from 'react-admin';
...
...

// Make the request with fetch/axios whatever you prefer and catch the error:
// message - the message that will appear in the alert notification popup
// status - the status code
// errors - the errors in key => value format, example in comment below
return fetchClient.request(config).then((response) => {
      return convertHTTPResponse(response, type, resource, params);
    }).catch(function (error) {
      throw new HttpError(error.response.data.message, error.response.status, error.response.data.errors);
    });

Затем создайте такую ​​сагу:

import {CRUD_CREATE_FAILURE} from "react-admin";
import {stopSubmit} from 'redux-form';
import {put, takeEvery} from "redux-saga/effects";

export default function* errorSagas() {
  yield takeEvery(CRUD_CREATE_FAILURE, crudCreateFailure);
}

export function* crudCreateFailure(action) {
  var json = action.payload;
  // json structure looks like this:
  // {
  //     username: "This username is already taken",
  //     age: "Your age must be above 18 years old"
  // }
  yield put(stopSubmit('record-form', json));
}

Убедитесь, что ошибки (json) имеют формат, как в примере выше!

Затем вставьте сагу в компонент:

import errorSagas from './sagas/errorSagas';
...
...

<Admin
        customSagas={[ errorSagas ]}
        loginPage={LoginPage}
        authProvider={authProvider}
        dataProvider={dataProvider}
      >

Бум! он работает введите здесь описание изображения

Удачи!

person llioor    schedule 14.02.2019
comment
Можно ли изменить это решение для работы с React Admin 3? Если нет (новая библиотека форм больше не использует Redux), может быть, у вас есть какие-нибудь указания о том, как это сделать с текущими версиями? - person Rad80; 17.02.2020
comment
Это не работает в RA 3 ... Я поделюсь решением позже - person llioor; 24.02.2020
comment
@llioor ты нашел это? - person Armel Larcier; 17.04.2020
comment
Да, супер сложно, это проблема response-admin, которая не позволяет нам отображать ошибки. Мы решили это в супер нестандартной работе. Я могу посоветовать использовать final-form.org/docs/react-final -form / api / FormSpy - person llioor; 19.04.2020