javascript 更新useFieldArray / react-hook-form中的值

13z8s7eq  于 2023-06-04  发布在  Java
关注(0)|答案(1)|浏览(321)

我正在搜索有关react-hook-form / useFieldArray问题的帮助。
我有一个这样的数组:

[ 
  {name: "one", data: "long string"},
  {name: "two", data: "another long string"},
]

这个数组在一个表单中,并在useFieldArray的帮助下呈现。
现在我想在第一个元素上设置一个新的data。react-hook-form的文档给出了“update”函数:

因为我不想触发重新挂载,所以我使用setValue API如下:

form.setValue("array.0.data", newValue);

当我这样做时,我通过使用函数form.watchform.getValues获得新值,但是当我使用array.fields[0].data查询字段值时,我仍然获得旧值。
我将感谢任何帮助,如何更新一个数组中的单个值,并获得新的值,以及在该领域的形式,而没有得到一个重新挂载。
最好的问候,托拜厄斯

6jygbczu

6jygbczu1#

首先是例子,然后是解释。
执行更改的方法:

const setSkuDescription = (
    value: string,
    index: number,
    field: FieldArrayWithId<Fields, 'product', 'id'>
): void => {
    update(index, {
        ...field, // all the info in the current object field this is required and not partial (they say is in the doc)
        productID: value, // one of the fields i want to update
        skuDescriptions: rawProducts // another field i want to update
            .map((p) => {
                if (p.ta_name === value) return p;
            })
            .filter((p) => p !== undefined) as Product[]
    });
};

其中im使用该方法:

<CFormSelect
// this is for reference to you to see where to use the method
  onChange={(d) => setSkuDescription(d.currentTarget.value, index, field)
}>
    <option hidden>---</option>
    {products.map((product, key) => (
        <option value={product.value as string} key={key}>
           {product.label}
        </option>
     ))}
</CFormSelect>

反映变化的地方

<CFormSelect
{...register("product.${index}.description", { // this is for reference to you to see where the method will render in the HTML if you need it
     required: "The field SKU Description is required"
 })}>
     <option hidden>---</option>
     {field.skuDescriptions.map((p, key) => (
         <option value={p.ta_productid as string} key={key}>
            {p.ta_size}
         </option>
      ))}
</CFormSelect>

解释:首先是接收3个参数的方法。第一个是你想要修改的“值”,第二个是数组在Map时给你的数组索引,最后是整个field对象返回数组的Map,因为这需要用来更新对象的所有信息(这部分参考官方文档)。
required information in the docs

相关问题