Formik FieldArray使用TypeScript处理yup验证模式

时间:2020-07-22 08:10:12

标签: reactjs typescript validation formik yup

我有一个动态表格,可以用formik的fieldarray创建它。我没有问题生成新的表单字段并验证它们。我正在使用打字稿,下面的代码显示了错误字段上的类型错误。

<Formik
  enableReinitialize
  initialValues={{
    formValues: [
      {
        socialPlatform: "",
        url: "",
      },
    ],
  }}
  onSubmit={(values) => {
    console.log(values);
  }}
  validationSchema={validationSchema}
>
  {({ values, handleChange, errors, touched }) => {
    return (
      <Form>
        <FieldArray name="formValues">
          {({ push }) => (
            <React.Fragment>
              {values.formValues.map((formValue, index) => (
                <Field
                  id={`formValues.${index}.socialPlatform`}
                  name={`formValues.${index}.socialPlatform`}
                  label="Social Platform"
                  placeholder="Select Social Media"
                  options={socialMedias}
                  value={formValue.socialPlatform}
                  onChangeHandler={handleChange}
                  hasError={
                    errors.formValues[index].socialPlatform &&
                    touched.formValues[index].socialPlatform
                  }
                  errorMessage={errors.formValues[index].socialPlatform}
                  component={Dropdown}
                />
              ))}
            </React.Fragment>
          )}
        </FieldArray>
      </Form>
    );
  }}
</Formik>

下面的部分显示Object可能是'undefined',并且'string | type类型的属性'socialPlatform'不存在。 FormikErrors <{socialPlatform:string; url:字符串; }>'。 属性“ socialPlatform”在“字符串”类型上不存在。我该怎么办?

hasError={
  errors.formValues[index].socialPlatform &&
  touched.formValues[index].socialPlatform
}
errorMessage={errors.formValues[index].socialPlatform}

0 个答案:

没有答案