如何正确显示提交错误

Question

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

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

以下是用于表单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

事实证明，问题是提供的示例存在一些我一直关注的不一致之处。

下面是示例代码的屏幕截图，其中包含我的意思。

我将我的现场道具更新为此，它起作用了：

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