我正在尝试使用 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])}
/>
</>
)
}
</>
)
/>
)
}
这个问题有什么替代方案吗?