reactjs - 如何以 formik 形式从 DOM 中删除空的错误 div？

Question

我在身份验证页面中有以下代码来控制警报消息：

<div className="messages-wrapper">
  {formik.errors.email &&
    <div className="alert alert-danger">
      <ErrorMessage name="email" />
    </div>
  }
  {formik.errors.password &&
    <div className="alert alert-danger">
      <ErrorMessage name="password" />
    </div>
  }
  {error && <div className="alert alert-danger">{error}</div>}
</div>

我意识到有时在 DOM 中它有：

<div class="alert alert-danger"></div>

结果，显示屏中出现粉红色条。

有谁知道如何实现这样我们只在有文本时显示一个警告栏？

标签： reactjsformik

Answer 1

确保初始化所有输入/字段值（可能是您忘记初始化电子邮件的值？

我试图复制您的问题，当我不初始化任何字段值时，我能够看到空的粉红色条。

  ...
<Formik
      initialValues={{ email: "", password: "" }} // <---- correct - both email and password are initialised
      // initialValues={{ password: "" }} // <--- wrong, email is not initialised. With this, there will be empty pink bar issue
      validate={validate}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
  ...

如果有用，请参阅我在代码沙箱中创建的这个示例

最后，我不确定你为什么有这行代码{error && <div className="alert alert-danger">{error}</div>}。也检查一下。祝你好运。