ReactJS - Как записать указанное поле c, которое вызывает код ошибки 400 при отправке формы - PullRequest
Новая
       1

ReactJS - Как записать указанное поле c, которое вызывает код ошибки 400 при отправке формы

0 голосов
/ 27 мая 2020

В настоящее время я работаю над веб-приложением, которое использует ReactJS в качестве внешнего интерфейса и DRF как серверную часть, и прямо сейчас я работаю над проверкой формы. В бэкэнде для полей, которые являются телефонными номерами, я использую поле PhoneNumber, которое представляет собой библиотеку Django, которая взаимодействует с python -фонными номерами для проверки введенных телефонных номеров. Поэтому я подумал, что было бы лучше, если бы Я провожу проверку формы на основе ответа на запрос DRF api post, поскольку мне было бы сложно придумать регулярное выражение, которое полностью соответствует требованиям поля PhoneNumber. Следовательно, я пытаюсь выяснить, возможно ли, чтобы ответ об ошибке ax ios конкретно сообщил мне, какое поле вызывает код ошибки 400. Если да, то я могу отобразить соответствующую ошибку, например «Это не номер телефона» над соответствующими полями. Или, если нет, есть ли лучший способ справиться с этим и полностью соответствовать требованиям поля PhoneNumber? По сути, я не хочу сталкиваться с проблемой, когда номер телефона проходит проверку формы ReactJS, но не соответствует требованиям поля Django PhoneNumber, и форма просто не может быть отправлена ​​без указания причины (если у меня есть поле и код ошибки, я могу сделать вывод, что это связано с недействительным номером телефона, и отобразить необходимые ошибки на экране оттуда). Я заметил, что при использовании Postman для вызовов API он может конкретно сказать мне, какое поле вызывает ошибку, и мне было интересно, может ли Ax ios сделать то же самое?

В настоящее время это мой. catch для почтового запроса ax ios, и все, что он делает, это показывает мне код ошибки и некоторую другую не относящуюся к делу информацию. 

 .catch(error => {
        console.log(error.toJSON());
        })

Ниже представлена ​​модель, которую я пытаюсь проверить. Три поля ниже - это поля, которые я визуализировал в форме в ReactJS, и все они будут отправлены в рамках 1 запроса на публикацию API, поэтому указанное поле c, вызывающее ошибку, важно для понимания того, какое поле мне следует отобразить сообщение об ошибке, чтобы конечный пользователь знал, что ему нужно изменить это поле c, поскольку это недопустимый номер телефона. 

class CustomerInformation(models.Model):
   customer_name = models.CharField(max_length=100)
   telephone_number = PhoneNumberField(blank=True)
   telephone_number_backup = PhoneNumberField(blank=True)

Любая помощь приветствуется и приветствуется, заранее спасибо ! Я новичок в ReactJS, поэтому я не уверен, подходит ли мое предполагаемое решение, пожалуйста, направьте меня в правильном направлении, если я ошибаюсь!

1 Ответ

0 голосов
/ 27 мая 2020

Хорошо, заняло некоторое время и погуглил, но понял это, я могу найти подробности ошибки в данных error.response.

Это то, что я сделал со своим топором ios call (кстати, я Я использую DRF, поэтому я не уверен, будет ли он работать для других серверных систем) 

.catch(error => {
       console.log(error.response.data)
  )}

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

Например, сообщение об ошибке I got было: 

{telephone_number: ["The phone number entered is not valid."]}

Оттуда я смог отобразить соответствующие сообщения об ошибках в соответствующих полях, сопоставив ключ объекта с именем поля.

Надеюсь, это помогло некоторым людям, это определенно помогло мне!

...