Question

我正在建立一个使用React Final Form处理表单状态的注册表单。我的浏览器验证效果很好，但是当我从服务器收到验证错误时，我不知道如何正确显示它们。

我研究了文档中包含的Submission Errors示例。我真的看不出我的代码与该代码有什么显着差异。似乎所需要做的就是返回一个对象，其中键是字段名，值是要显示的消息。

以下是onSubmit表单中使用的方法：

    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;
        }
    }

在catch代码中，我解析了我认为是预期的对象形式的错误。这是我要返回的实际对象：

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

我希望它会在电子邮件字段下显示该消息。就这样，它什么也不显示。

谢谢您的帮助！

Answer 1

发现问题在于所提供的示例存在一些我一直关注的不一致之处。

Here's a screenshot of the example code with what I mean.

我对此进行了现场道具更新，并且有效：

func arrowRightButton(baseColor:UIColor){
    self.setTitleColor(baseColor, for: .normal)
    self.setTitleColor(baseColor.withAlphaComponent(0.3), for: .highlighted)

    guard let image = UIImage(named: "ArrowRight")?.withRenderingMode(.alwaysTemplate) else
    {
        return
    }
    guard let imageHighlight = UIImage(named: "ArrowRight")?.alpha(0.3)?.withRenderingMode(.alwaysTemplate) else
    {
        return
    }

    self.imageView?.contentMode = .scaleAspectFit

    self.setImage(image, for: .normal)
    self.setImage(imageHighlight, for: .highlighted)
    self.imageEdgeInsets = UIEdgeInsets(top: 0, left: self.bounds.size.width-image.size.width*1.5, bottom: 0, right: 0);
    self.layer.borderWidth = 1.0
    self.layer.borderColor = UIColor(red:0.29, green:0.64, blue:0.80, alpha:1.0).cgColor
    self.contentEdgeInsets = UIEdgeInsets(top: 10,left: 0,bottom: 10,right: 0)
}

如何获取提交错误以正确显示？

1 个答案: