useFieldArray 反应钩子形式答案

【问题标题】：useFieldArray react-hook-formuseFieldArray 反应钩子形式
【发布时间】：2020-03-25 12:55:33
【问题描述】：

我阻止了一些东西，这根本没有意义。对于熟悉 react-hook-form 的您，我正在尝试创建一个根据状态对象呈现的动态字段数组。问题是，它在第一次渲染时渲染，但在第二次渲染时不渲染。

例子：


    let subK = [{ name: '' }]
    if (kategories[kategori] !== undefined) {
        //subK = kategories[kategori].subKategori.map(x => ({ name: JSON.stringify(x) }))
        subK = kategories[kategori].subKategori.map(x => ({ name: (x) }))
    }
    console.log(subK) // it logs[{name: 'kat1'},{name: 'kat2'}]

    //defines the form
    const { register, control, handleSubmit } = useForm({
        defaultValues: {
            subKategori: subK
        }
    });

不渲染 subK。

如果我这样做了

    let subK = [{ name: '' }]
    if (kategories[kategori] !== undefined) {
        //subK = kategories[kategori].subKategori.map(x => ({ name: JSON.stringify(x) }))
        subK = kategories[kategori].subKategori.map(x => ({ name: (x) }))
    }
    console.log(subK)

    //defines the form
    const { register, control, handleSubmit } = useForm({
        defaultValues: {
            subKategori: [{name: 'kat1'},{name: 'kat2'}]
        }
    });

它也会按预期呈现。

我做错了什么？

【问题讨论】：

您能否提供codesandbox 以重现该问题？
@NiyasNazar 不是真的。这个项目很大，对于一个客户来说。不希望它在互联网上泄漏，我提供的代码块是 react-hook-form 和 useFieldArray() 的核心
kategories 来自哪里？
来自该州的@nubinub。
正如@NiyasNazar 所建议的那样，您应该真正缩小并抽象您面临的问题。首先它可以帮助你解决问题，其次它可以让你发布一个沙盒。

标签： reactjs react-hook-form

【解决方案1】：

subKategori 第 8 行的结构存在一个小问题。数组似乎是字符串化形式。但是对于map，你需要一个数组。在第 8 行将其转换如下：

....
 kat1: {
          subKategori: ["kat1", "kat2"]
        },
...

这里是更新的沙盒link

【讨论】：