使用Formik FieldArray+Yup校验数组对象空值时报'0'属性未定义如何解决

问题原因 #

报错Cannot read property '0' of undefined是因为你直接访问了未初始化的errors.pemeriksa[index]和touched.pemeriksa[index]属性：Formik的errors、touched对象只会在对应字段有错误/被触碰时才会生成对应嵌套结构，在校验刚触发时errors.pemeriksa可能为undefined，直接访问索引[0]就会抛出错误。

另外你当前的Yup校验规则没有配置id_jabatan的校验逻辑，也会导致你预期的id_jabatan为空的校验无法触发。

解决步骤 #

1. 补全Yup校验规则，增加id_jabatan的必填校验：

const formValidationSchema = Yup.object().shape({
  pemeriksa: Yup.array().of(
    Yup.object().shape({
      value: Yup.string().required('Pilih Pemeriksa'),
      // 增加你需要的id_jabatan必填校验
      id_jabatan: Yup.string().required('Pilih Pemeriksa')
    })),
  penyetuju: Yup.object().shape({
    value: Yup.string().required('Pilih Penyetuju')
  }).required('Pilih Penyetuju')
});

2. 给errors和touched的访问增加可选链判断，避免访问undefined的属性：
   将SelectSearch组件的error、errorText属性替换为以下写法：

<SelectSearch
  // 其余属性保持不变
  error={!!errors?.pemeriksa?.[index]?.id_jabatan && !!touched?.pemeriksa?.[index]?.id_jabatan}
  errorText={errors?.pemeriksa?.[index]?.id_jabatan ?? ''}
/>

如果你的项目不支持可选链语法，可以改用逐层&&判断的写法：

error={
  errors.pemeriksa && 
  errors.pemeriksa[index] && 
  errors.pemeriksa[index].id_jabatan && 
  touched.pemeriksa && 
  touched.pemeriksa[index] && 
  touched.pemeriksa[index].id_jabatan
}
errorText={
  errors.pemeriksa && errors.pemeriksa[index] 
    ? errors.pemeriksa[index].id_jabatan 
    : ''
}

内容的提问来源于stack exchange，提问作者Made Abinawa