[英]react-hook-form field array using with nested array structure
i receive an array like this one我收到一个这样的数组
const infoArray = [
{
categories: [{...}, {...}, {...}],
id: number,
categoryTitle: string,
},
{
categories: [{...}, {...}, {...}],
id: number,
categoryTitle: string,
}
]
every element of categories has this structure:类别的每个元素都具有以下结构:
categories = [{
description: string,
label: string,
id: number,
},
{
description: string,
label: string,
id: number,
}]
this array represent a series of input, every input with a component that map the categories array, just to have an example这个数组表示一系列输入,每个输入都有一个映射类别数组的组件,只是举个例子
export default function CaseCard({
categories, categoryTitle, ref, name,
}: CaseFormProps) {
return (
{categories.map((category) => (
<CategoryContainer>
<CategoryInput ref={ref} value={category.id} />
<CategoryDescriptionContainer>
<CategoriesLabel>
{category.label}
{' '}
-
{' '}
</CategoriesLabel>
<CategoriesDescription>
{category.description}
</CategoriesDescription>
</CategoryDescriptionContainer>
</CategoryContainer>
))}
);
}
this component is rendered through a map of the first data array此组件通过第一个数据数组的映射呈现
<form
onSubmit={handleSubmit(onSubmit)}
style={{ display: "flex", flexWrap: "wrap" }}
>
{infoArray.map(({ id, label, categories }: infoArrayItems) => (
<CaseCard
name="test"
key={id}
label={label}
categories={categories}
ref={register}
/>
))}
</form>
Down below is how a CaseCard is displayed, we have one CaseCard for every object inside the array InfoArray
下面是 CaseCard 的显示方式,对于数组
InfoArray
每个对象,我们都有一个InfoArray
I didn't find an example with complex data structure so i don't understand how to use react-hook-form for this case.我没有找到具有复杂数据结构的示例,所以我不明白如何在这种情况下使用 react-hook-form。
i already saw extensively this example ---> https://codesandbox.io/s/vy8fv , plus multiple answer on SO.我已经广泛地看到了这个例子 ---> https://codesandbox.io/s/vy8fv ,以及关于 SO 的多个答案。
I tried to apply the useFieldArray in multiple ways, but i cannot figure out how it should work without break everything.我尝试以多种方式应用 useFieldArray,但我无法弄清楚它应该如何工作而不破坏一切。 Can someone please help me to understand on how introduce react-hook-form ?
有人可以帮助我了解如何引入 react-hook-form 吗?
i found the main problem:我发现了主要问题:
it was the use of ref on the wrong component,这是在错误的组件上使用了 ref,
i just changed我刚改变
<CaseCard
name="test"
key={id}
label={label}
categories={categories}
**ref**={register}
/>
into进入
<CaseCard
name="test"
key={id}
label={label}
categories={categories}
**register**={register}
/>
and make the props compatible with the relative element.并使道具与相关元素兼容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.