Antd V4 表单列表 setFieldValue

Question

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

我得到的解决方案是为整个表单列表调用 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",
      },
    ],
  },
];

使用表单列表实现

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

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

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

预先感谢您的宝贵回答

Answer 1

如果你不明白@Ajish 的答案（像我一样），我会尝试解释一下：

正如Antd 文档所说，您需要将 a 传递FieldData[]给您的form.setFields()方法。就我而言，我只需要更新一个字段，并且只使用FieldData 中的name和value属性。因此，我的代码是这样的：

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

Name属性是一个NamePath，由以下部分组成：

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

为了更清楚地说明，products具有以下格式：

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