如何使用带有 yup validationSchema 的 Formik 显示表单错误摘要

Question

我想显示 yup validationSchema 发现的所有错误的摘要。

我的 CodeSandbox 示例：https://codesandbox.io/s/7m3n44po80

应该是这样的

提交时出现错误应该是什么样子。在屏幕截图中，错误摘要是硬编码的，就像在我的 CodeSandbox 中一样：

我找不到任何 "hook" 可以抓取所有验证错误的地方。

Answer 1

在使用 withFormik

时，您已将 errors 道具传递给您的组件

例如：https://codesandbox.io/s/j216zmo0xw

Answer 2

您可以从 props

获得 errors

errors是一个对象，其中每个字段的名称都有错误。

这是一个example