Как я могу получить ошибки отправки для правильного отображения? - PullRequest
Новая
       15

Как я могу получить ошибки отправки для правильного отображения?

0 голосов
/ 21 июня 2019

Я настраиваю регистрационную форму, которая использует React Final Form для обработки состояния формы.У меня отлично работает проверка браузера, но когда я получаю ошибки проверки с сервера, я не могу понять, как заставить их правильно отображаться.

Я изучил пример Ошибки при отправке , который включенв документах.Я действительно не вижу существенной разницы между моим кодом и этим кодом.Кажется, что все, что нужно, это вернуть объект, ключ которого - это имя поля, а значение - это сообщение для отображения.

Вот метод, который используется для формы onSubmit prop: 

    async sendUserRequest(values) {
        try {
            const data = await axios.post('/register', {
                name:     `${values.firstName} ${values.lastName}`,
                email:    values.email,
                password: values.password
            });
        } catch (error) {
            let errors = {};
            Object.entries(error.response.data.errors).forEach(([field, value]) => {
                errors[field] = Array.isArray(value) ? value[0] : value;
            });

            console.log('errors', errors);
            return errors;
        }
    }

В коде перехвата я анализирую ошибки в форме объекта, полагаю, что он ожидает.Вот фактический объект, который я возвращаю: 

{
  "email": "The email has already been taken."
}

Я ожидаю, что это отобразит сообщение в поле электронной почты.На самом деле ничего не отображается.

Спасибо за любую помощь в этом!

1 Ответ

1 голос
/ 21 июня 2019

Оказывается, проблема в том, что в приведенном примере есть некоторая несогласованность, на которой я продолжал концентрироваться.

Вот скриншот примера кода с тем, что я имею в виду.

Я обновил свой полевой реквизит, и это сработало: 

error={meta.touched && ( meta.error || meta.submitError ) ? meta.error || meta.submitError : null}
...