useFieldArray react-hook-form

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"]
        },
...

這是更新的沙箱鏈接