反应JS | Objects 无效，因为反应 children

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.

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

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

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

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

Answer 1

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

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

如果我们按照文档：

name

name: string Required

A field's name in Formik state. To access nested objects or arrays, name >can also accept lodash-like dot path like social.facebook or >friends[0].firstName

查看 DOC 中的示例：

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

反应JS | Objects 无效，因为反应 children

ReactJS | Objects are not valid as react children

javascript

forms

error-handling

reactjs

formik