使用嵌套数组结构的 react-hook-form 字段数组

Question

我收到一个这样的数组

const infoArray = [
  {
   categories: [{...}, {...}, {...}],
   id: number,
   categoryTitle: string,
  },
  {
   categories: [{...}, {...}, {...}],
   id: number,
   categoryTitle: string,
  }
]

类别的每个元素都具有以下结构：

categories = [{
  description: string,
  label: string,
  id: number,
}, 
{
  description: string,
  label: string,
  id: number,
}]

这个数组表示一系列输入，每个输入都有一个映射类别数组的组件，只是举个例子

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每个对象，我们都有一个InfoArray

我没有找到具有复杂数据结构的示例，所以我不明白如何在这种情况下使用 react-hook-form。

我已经广泛地看到了这个例子 ---> https://codesandbox.io/s/vy8fv ，以及关于 SO 的多个答案。

我尝试以多种方式应用 useFieldArray，但我无法弄清楚它应该如何工作而不破坏一切。 有人可以帮助我了解如何引入 react-hook-form 吗？

Answer 1

我发现了主要问题：

这是在错误的组件上使用了 ref，

我刚改变

        <CaseCard
            name="test"
            key={id}
            label={label}
            categories={categories}
            **ref**={register}
        />

进入

    <CaseCard
        name="test"
        key={id}
        label={label}
        categories={categories}
        **register**={register}
    />

并使道具与相关元素兼容。