Javascript 表单后端失效反馈-don'；在下次提交之前不会再次显示

我在一个页面上有一个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}
  </>
}

{shouldldrowornotification&&
{shouldldrowornotification=false}
}

因此，

shouldldrowornotification

是一个挂在我的功能组件（保存表单）外面的变量。我在formSubmit上将其设置为true，在通知出现时（在该块内）将其设置为false。但随后通知消失（为什么？）

---

如何以更具声明性的方式执行此操作？

您的通知将消失，因为您将其重置为false，这将强制React组件重新呈现。您是否知道如何处理此错误，从已使用的类似服务器的用户名返回的错误类型，以及您希望阻止用户使用相同的用户名重新提交？可能是您只想不断更新所有用户名，并且不允许用户提交他们之前尝试的所有用户名，这是您的场景吗？（还是类似的场景？）如果是这样的话，我可以帮助您解决此问题。您的通知会消失，因为您将其重置为false，这将强制React组件重新渲染。您知道如何处理此错误，服务器返回的错误类型（如已使用的用户名）以及您希望阻止用户使用相同的用户名重新提交吗？您可能只是想继续更新所有用户名，并禁止用户提交他们之前尝试的所有用户名，这是您的方案吗？（或在类似的行中？）如果是这样，我可能能够提供帮助