reactjs - useFieldArray 反应钩子形式

Question

我正在阻止某些东西，这根本没有意义。对于熟悉 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'}]
        }
    });

它也按预期呈现。

我究竟做错了什么？

Answer 1

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

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

这是更新的沙盒链接