如何使用 Formik 中的对象处理 error.touched 和错误

Question

我有一个对象，我将其与 Formik 集成到一个表单中

 const obj = {
   address: {
     line1: 'Street1',
     line2: 'Street2',
     line3: 'Street3'
  }

当我创建 formik.group 时，我遇到了值控制问题。

      <Form.Control
              value={formikProps.values.address.line2}
              onChange={formikProps.handleChange}
              onBlur={formikProps.handleBlur}
              type="text"
              name="address.line2"
              aria-label="address line 2"
              isInvalid={
                !!formikProps.touched.address.line2 &&
                !!formikProps.errors.address.line2
              }
               />

如果我添加 isInvalid 我最终会出错 :

 TS2339: Property 'line2' does not exist on type 'boolean | FormikTouched<any> | FormikTouched<any>[]'.

属性 'line2' 在类型 'false' 上不存在。

如果我删除 isInvalid 则修改文本字段没有问题。

如何将对象集成到isInvalid控件中？如果你有想法？

   isInvalid={
            !!formikProps.touched.address.line2 &&
            !!formikProps.errors.address.line2
          }

Answer 1

尝试：

isInvalid={
                !!formikProps.touched.address?.line2 &&
                !!formikProps.errors.address?.line2
              }

如何使用 Formik 中的对象处理 error.touched 和错误

How to handle error.touched and errors with an object in Formik

reactjs

react-bootstrap

formik