如何解决使用嵌套数组结构的react-hook-form字段数组
我收到这样的数组
const infoArray = [
{
categories: [{...},{...},{...}],id: number,categoryTitle: string,},{
categories: [{...},}
]
每个类别的元素都具有以下结构:
categories = [{
description: string,label: string,{
description: string,}]
此数组代表一系列输入,每个输入都带有一个映射了类别数组的组件,只是为了举例说明
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>
))}
);
}
此组件是通过第一个数据数组的映射呈现的
<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>
下面是CaseCard的显示方式,数组InfoArray
中的每个对象都有一个CaseCard。
我没有找到一个具有复杂数据结构的示例,因此我不了解如何在这种情况下使用react-hook-form。
我已经广泛地看到了这个示例---> https://codesandbox.io/s/vy8fv,以及关于SO的多个答案。
我试图以多种方式应用useFieldArray,但是我无法弄清楚它应该如何工作而不破坏所有内容。有人可以帮我理解如何引入react-hook-form吗?
解决方法
我发现了主要问题:
这是在错误的组件上使用ref
我刚刚改变
<CaseCard
name="test"
key={id}
label={label}
categories={categories}
ref={register}
/>
进入
<CaseCard
name="test"
key={id}
label={label}
categories={categories}
register={register}
/>
并使道具与相关元素兼容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。