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状态的字段名称。要访问嵌套的对象或数组，名称>还可以接受类似于social.facebook或> friends[0].firstName
的类似lodash的点路径。

看看DOC中的示例：

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

ReactJS |对象无效，不能作为反应子对象

1 个答案: