Question

我在页面上有一个Formik表单，提交后，某些字段可能会被后端无效。

我使用Redux跟踪无效值，并动态更新这些字段的验证模式（这可能是一种更好的方法，但这不是此问题的重点，尽管这种假设的更好方法可能会帮助我解决这个问题）

在此表单中，输入字段元素有ErrorMessage个组件，在表单中的所有字段之上还有一个MainErrorMessage。

每当一个字段值无效并且都很好时，将显示ErrorMessage元素（特定于每个输入）。

问题：

我希望MainErrorMessage仅在提交表单并由后端使其无效之后才显示。另外，我希望在用户关闭它或关闭它自己后（例如，当用户修改输入的值并且它变为有效时）不显示值再次变为无效（特定输入字段的ErrorMessage组件在无效时将始终显示，这应该足够了）。最后，我只希望在后端再次提交表单并使表单无效时再次显示MainErrorMessage。

换句话说：

用户提交表单
服务器响应错误（例如：用户名已被占用）
MainErrorMessage（以及输入的ErrorMessage）
用户将值更改为有效值。 MainErrorMessage和ErrorMessage都消失了。
用户再次更改该值（更改为无效的值），然后再次显示MainErrorMessage：如何防止这种情况？ MainErrorMessage仅应在服务器收到另一个错误响应后再次显示。

我能想到的最好的方法看起来很糟糕，甚至都不起作用：

{shouldShowErrorNotification &&
  <>
    <Notification
      title={text.genericFormValidationErrorNotificationTitle}
      body={text.genericFormValidationErrorNotificationBody}
      type='error'
      dismissable={true}
    />
    {shouldShowErrorNotification = false}
  </>
}

因此，shouldShowErrorNotification是一个变量，仅挂在我的功能组件（包含表单）的外部中。我在formSubmit上将其设置为true，并在出现该通知时（在该块内）将其设置为false。但是通知消失了（为什么？）。

如何以更具声明性的方式做到这一点？

表单后端无效反馈-在下一次提交之前不会再显示

0 个答案: