1

我正在尝试使用 FieldArray 和 useField 挂钩创建自定义 fieldarray 组件。

该组件将以嵌套形式使用。

一切都很好,除了我在验证方面遇到问题。我无法验证每个字段,因为 meta.touched 只显示一个真或假。(与能够显示已触摸哪个对象的 Formik 渲染错误相比)。

示例代码:

const TestInput = (props: any) => {
  const [field, meta] = useField(props.name)

  return (
    <FieldArray
      name={props.name}
      render={() => (
        <>
          {field.value.map((item, index) => {
            return (
              <>
                <TextField
                  {...field}
                  name={`$name}.${index}.key`}
                  value={item.key}
                  helperText={meta.error && meta.error[index] && meta.touched
                    ? meta.error[index].key
                    : ''
                  }
                  error={meta.touched && Boolean(meta.error[index])} 
                />

                <TextField
                  {...field}
                  name={`$name}.${index}.value`}
                  value={item.key}
                  helperText={meta.error && meta.error[index] && meta.touched
                    ? meta.error[index].value
                    : ''
                  }
                  error={meta.touched && Boolean(meta.error[index])} 
                />
              </>
             )
           }
        </>
      )
    />
  )
}

这个问题有什么替代方案吗?

4

0 回答 0