Отображение ошибок, возвращаемых через API - React Final Form

Я пытаюсь отобразить встроенные ошибки, возвращаемые через API, для каждого недопустимого поля. Я следую примеру ошибок отправки из здесь с что-то вроде этого:

const handleSubmit = async (values) => {
  let errors;

  await createProduct(values) // axios.post(...)
    .then((res) => ...)
    .catch((error) => {
      errors = error.response.data.errors;
      console.log(errors); // returns { title: ["can't be blank"] }
    });

  return errors; // returns { title: ["can't be blank"] }
}

тогда моя форма выглядит так:

   <Form onSubmit={handleSubmit}>
        {({
          submitError,
          handleSubmit,
          ...
        }) => (
          <BSForm onSubmit={handleSubmit}> // BSForm for boostrapform
            {submitError && (
              <div className="error">{submitError}</div> // not showing
            )}
            {console.log(submitError)} // returns 'undefined'
            <TextField
              name="title"
              ...
            />

и я могу вызвать submitError, только если я передаю {[FORM_ERROR]: 'error message'} вместо того, чтобы возвращать errors obj.

Я бы хотел иметь возможность просто передавать эти ошибки API в meta: { error } реквизиты соответствующих полей, но я вполне могу жить с submitError ошибками API упаковки.


reactjs error-handling api jsx react-final-form
person dimitry_n    schedule 07.12.2019    source источник
comment
Вам нужно состояние вместо переменной (ошибка). Если вы сделаете setState, реакция будет повторно визуализировать dom и обновит состояние ошибки и код.   -  person Shubham Verma    schedule 07.12.2019

Ответы (2)


arrow_upward
1
arrow_downward

Вот что сработало для моего варианта использования! В submit handler мне просто нужно было разрешить обещание с помощью объекта ошибки, отправленного api, а затем React-final-form (RFF) распространит error messages на отдельные состояния поля через meta.submitError.

Также следует отметить, что разрешенный объект ошибки должен содержать совпадающие object keys or property names с теми, которые были отправлены на сервер (т. Е. Имена полей в form.values должны совпадать с ключами объекта, которые вы resolve вернули, когда вы получите submit error). Моя submit handler наконец выглядела так:

 const submit = (values) => {
    const promise = 'some promise or api call';

    return new Promise(resolve => {
       promise(values))
        .then(response => {
          // ...do whatever
          resolve(true);
        })
        .catch(error =>{
             if (error.validationErrors) {
                resolve({ [FORM_ERROR]: error.validationErrors });
             } else {
                 //Depending on the shape of the error object from the server, destructure it or transform it so the keys match the field names in the form
                 //Example submissionErrors object would look like: {name: "Duplicate name detected", age: "Invalid age"}
                  const submissionErrors = {
                    ...error.data?.errors,
                    ...error.response?.data?.errors,
                   }; 
               // Then finally `resolve` the errorObject back to the form. 
              //This `resolve` is what makes RFF to update the fieldState of the affected fields with `meta.submitError`
             // You can then use `meta.submitError`, from `fieldState` of a given field, to display its `submission error`
               resolve({ ...submissionErrors});
           }
       });
    });
  };
person Chaiwa    schedule 23.05.2021

arrow_upward
0
arrow_downward

Нашел решение через 30 секунд после публикации. Я пропустил опору meta: { submissionError } в примере.

Таким образом, способ, которым я возвращаю ошибки, кажется правильным, единственная разница в том, что вместо отображения ошибок уровня поля с помощью meta.error && meta.touched я должен добавить meta.submitError следующим образом:

(meta.error || meta.submitError) && meta.touched;

затем, чтобы отобразить ошибку:

{(meta.error || meta.submitError) && meta.touched && (
  <span>{meta.error || meta.submitError}</span>
)}
person dimitry_n    schedule 07.12.2019
comment
Как вы заставили это meta: { submissionError } работать? Я пытаюсь добиться того же: возвращать ошибки api в соответствующие meta.submitError для каждого поля в форме. Не могли бы вы поделиться дополнительным кодом о том, как вы обрабатывали ошибки api и передавали их meta.submitErrror для каждого поля? - person Chaiwa; 01.03.2021
comment
@Chaiwa srry, это было некоторое время назад, и я не помню точную реализацию. Я почти уверен, что это был Rails api, и я считаю, что это были ошибки проверки на User.create, если это вообще помогает. - person dimitry_n; 01.03.2021