时间戳

首页 > 解决方案 > 如何让提交错误正确显示？

react-final-form - 如何让提交错误正确显示？

问题描述

我正在设置一个注册表单，它使用React Final Form来处理表单状态。我的浏览器验证工作得很好，但是当我从服务器收到验证错误时，我无法弄清楚如何让它们正确显示。

我研究了文档中包含的提交错误示例。我真的看不出我的代码与该代码有显着差异。似乎只需要返回一个对象，其中键是字段名称，值是要显示的消息。

这是用于 FormonSubmit道具的方法：

    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."
}

我希望这会在电子邮件字段下显示消息。事实上，它不显示任何内容。

感谢您对此的任何帮助！

标签： react-final-formfinal-form

解决方案

原来问题是提供的示例有一些我一直关注的不一致之处。

这是示例代码的屏幕截图，我的意思是。

我将我的字段道具更新为此并且它有效：

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

推荐阅读