javascript - ReactJS - 如何在提交表单时记录导致 400 错误代码的特定字段

Question

我目前正在开发一个使用 ReactJS 作为前端，使用 DRF 作为后端的 Web 应用程序，我现在正在处理表单验证。在后端，对于电话号码字段，我使用 PhoneNumber 字段，这是一个 Django 库，它与 python-phonenumbers 接口以验证键入的电话号码。因此，我认为最好是我的表单基于 DRF api 发布请求的响应进行验证，因为我很难想出一个完全符合 PhoneNumber 字段要求的正则表达式。因此，我试图弄清楚 axios 错误响应是否有可能专门告诉我哪个字段导致了 400 错误代码。如果是这样，我可以在相关字段上方显示相关错误，例如“这不是电话号码”。或者如果没有，我有没有更好的方法来处理这个问题并能够完全符合 PhoneNumber 字段的要求？基本上我不想遇到电话号码通过 ReactJS 表单验证但未通过 Django PhoneNumber 字段的要求的问题，并且表单无法提交，没有任何说明原因（如果我有该字段和错误代码，然后我可以推断这是由于电话号码无效，并从那里在屏幕上显示必要的错误）。我注意到当使用 Postman 进行 API 调用时，它能够具体告诉我是哪个字段导致了错误，我想知道 Axios 是否可以这样做？的要求？基本上我不想遇到电话号码通过 ReactJS 表单验证但未通过 Django PhoneNumber 字段的要求的问题，并且表单无法提交，没有任何说明原因（如果我有该字段和错误代码，然后我可以推断这是由于电话号码无效，并从那里在屏幕上显示必要的错误）。我注意到当使用 Postman 进行 API 调用时，它能够具体告诉我是哪个字段导致了错误，我想知道 Axios 是否可以这样做？的要求？基本上我不想遇到电话号码通过 ReactJS 表单验证但未通过 Django PhoneNumber 字段的要求的问题，并且表单无法提交，没有任何说明原因（如果我有该字段和错误代码，然后我可以推断这是由于电话号码无效，并从那里在屏幕上显示必要的错误）。我注意到当使用 Postman 进行 API 调用时，它能够具体告诉我是哪个字段导致了错误，我想知道 Axios 是否可以这样做？并从那里在屏幕上显示必要的错误）。我注意到当使用 Postman 进行 API 调用时，它能够具体告诉我是哪个字段导致了错误，我想知道 Axios 是否可以这样做？并从那里在屏幕上显示必要的错误）。我注意到当使用 Postman 进行 API 调用时，它能够具体告诉我是哪个字段导致了错误，我想知道 Axios 是否可以这样做？

目前这是我的 axios 发布请求的 .catch，它所做的只是向我显示错误代码和其他一些不相关的信息。

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

下面是我要验证的模型。下面的三个字段是我在 ReactJS 中的表单中呈现的字段，它们都将在 1 个 API 发布请求下提交，这就是为什么导致错误的特定字段对于知道我应该在哪个字段上呈现错误消息很重要以便最终用户知道他需要更改该特定字段，因为它是无效的电话号码。

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

欢迎并感谢所有帮助，在此先感谢您！我是 ReactJS 的新手，因此我不确定我的预期解决方案是否合适，如果我错了，请指导我正确的方向！

标签： javascriptdjangoreactjsdjango-rest-framework

Answer 1

好的，花了一些时间和谷歌搜索但想通了，我可以在 error.response 数据下找到错误的细节。

这就是我对 axios 调用所做的（顺便说一句，我正在使用 DRF，所以我不确定它是否适用于其他后端系统）

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

这将在尝试发布请求时注销后端标记的错误。它以对象的形式出现，对象的键作为字段名，对应的键的值将是一个标记出来的错误数组。

例如，我收到的错误消息是：

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

从那里，我能够通过将对象的键与字段的名称相匹配，将相关的错误消息呈现到相关的字段上。

希望这对某些人有所帮助，它当然对我有所帮助！