reactjs - Antd V4 表单列表setFieldValue

Question

在此处输入代码我们如何动态编辑表单列表中的元素并使用 setFieldsValue 设置该元素

我得到的解决方案是为整个表单 List 调用 setFieldsValue 但这不公平，会导致性能问题

我有这样的表单结构

users: [
  {
    name: "bob",
    education: [
      {
        qualification: "masters",
        college: "abc",
      },
      {
        qualification: "degree",
        collge: "ijk",
      },
    ],
  },
  {
    name: "alice",
    education: [
      {
        qualification: "ug",
        college: "abc",
      },
      {
        qualification: "higher secondary",
        college: "def",
      },
    ],
  },
];

使用表单列表实现

• 我想更新用户“alice”的“教育[1]”的“资格” 使用 antd v4 setFieldsValue
• 我得到了一个解决方案，即使用 getFieldsValue 获取所有值，然后 更改更改“资格”，然后更新整个表单值，但是 它会导致一些大型应用程序的性能问题
• 如何使用 setFieldsValue 更新表单中的单个字段？

• 在 antd v3 中，它通过在 setFeildsValue 中提供路径来存档，例如

  setFieldsValue({ 'user.1.education.1.qualification':'something' })

提前感谢您宝贵的回答

Answer 1

如果你不明白@Ajish 的回答(像我一样)，我会试着解释一下:

作为Antd docs说，您需要将 FieldData[] 传递给您的 form.setFields() 方法。在我的例子中，我只需要更新一个字段，并且我只使用了 FieldData 中的 name 和 value 属性。因此，我的代码是这样的:

form.setFields([
  {
    name: ['products', fieldIndex, 'total-value'],
    value: totalValue,
  },
]);

Name 属性是一个 NamePath组成:

• 'products':我的 Form.List 组件的名称；
• fieldIndex:引用我要更新的对象的索引；
• 'total-value':我要更新的字段。

为了进一步说明，products 具有以下格式:

products: [
  {
    quantity: 0,
    'unit-value': 0,
    'total-value': 0,
   },
 ],