当 Formik 出现错误时如何显示通用消息答案

【问题标题】：How do you show a generic message when there are errors with Formik当 Formik 出现错误时如何显示通用消息
【发布时间】：2021-02-26 23:30:52
【问题描述】：

我有一个使用 Formik 作为我的表单的表单，并使用 Yup 进行验证。在每个Field 下，我都有一个<ErrorMessage /> 组件来显示该表单字段的相关消息。这很好用，但是，由于有很多字段，我想在用户提交表单时在提交按钮旁边显示一条通用消息。像这样的：

<div className="alert alert-danger">
  One or more fields has an error.
</div>

我尝试根据来自 Formik 的 errors 对象有条件地渲染它：

{Object.keys(errors).length > 0 && (
  <div className="alert alert-danger">
    One or more fields has an error.
  </div>
)}

但是，当我onBlur 任何字段时，所有字段都会在内部进行验证，无论它们是否已被触摸，因此一旦我填写第一个表单，就会呈现此错误消息。如果字段已被触摸或在其旁边显示错误消息，我如何才能仅呈现此消息？

【问题讨论】：

【解决方案1】：

由于您只想在提交时显示错误消息，Formik 具有isValid 和submitCount 属性。将它们一起用于确定是否应呈现错误消息：

{!isValid && submitCount > 0 && (
  <div className="alert alert-danger">
    One or more fields has an error.
  </div>
)}

这将导致它仅在表单提交后如果有任何错误时呈现，并且在所有错误都已修复后自动消失。

【讨论】：