ReactJS |对象无效作为反应子项

Question

我正在使用React和Formik来创建一个管理表单。 (Error Handling, submission etc)。我在处理来自服务器的错误方面遇到了一些麻烦。

为了解决这个问题，我使用了Formik的内置<ErrorMessage />。所以，在表单的第一个元素中我添加了它。如下所示：

<form onSubmit={handleSubmit}>
          <div className="pb-2">
            <label className="font-weight-bold" htmlFor="username">
              Username <Asterisk />
            </label>
            <Field
              validate={this.debounceUsernameValidation}
              className={classNames('form-control', {
                'is-invalid': errors.username && touched.username
              })}
              placeholder="Username (Required)"
              autoComplete="false"
              name="username"
              type="text"
            />
            {errors.username && touched.username ? (
              <div className="text-danger">{errors.username}</div>
            ) : null}
          </div>
          <ErrorMessage name={errors.username} component="div" className="text-danger small" />
</form>

但是我收到以下错误：

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

我不确定我做错了什么。你能帮我解决一下吗，让我明白这个错误是什么。我的意思是来自服务器或客户端的错误应该是一个对象。

当React说If you need to be an object, use an array instead时。我真的不明白。谢谢你的时间。

错误对象。这是由Yup生成的，它与Formik结合使用：

{ "username": "Username is Required", "password": "Password is required", "confirmPassword": "Password Confirmation is Required", "group": "Group is required" }

Answer 1

您正在使用<ErrorMessage ... />错误。名称prop应该是一个字符串，其值与您的错误对象具有的键相同。像这样的东西：

<ErrorMessage component="div" name="username" />
// --> {touched.username && error.username ? <div>{error. username}</div> : null}

---

如果我们按照文档：

name

name: string必需

Formik状态下的字段名称。要访问嵌套对象或数组，name>也可以接受类似lodash的点路径，如social.facebook或> friends[0].firstName

看看DOC中的示例：

https://jaredpalmer.com/formik/docs/api/errormessage