如何使用动态字段重新创建表单以在 React antd（rc-forms）中进行编辑

Question

使用 antd 表单组件（依赖于rc-form）创建表单后，我还需要使用编辑表单，我找不到任何有关如何使用我的表单值初始化 antd 表单的资源有（尤其是动态字段）

我发现使用form.setFieldsInitialValue(theEditValues); 会正确初始化一些带有数据的表单字段（例如，带有多选的下拉菜单），但不是正常的下拉菜单&最重要的是，所有的未创建动态字段，提示您在创建字段之前无法设置字段数据

那么有没有一种首选的方式来处理编辑场景？这样：

1-根据之前提交的数据重新创建动态字段

2- 将整个表单与提交的数据同步

我添加了a sandbox to show what I mean，主要是如果我有表单值并且我想用给定值的动态字段初始化表单

注意：

我们需要处理用户输入任意数量的动态字段并且我们想要使用具有给定信息的编辑表单页面的一般情况

更新：

我更新了示例in a new sandbox 以显示动态处理值的含义，我不知道编辑场景中的动态输入，它可以是一个字段或很多字段，因此在从api，它应该使用form.setFieldsValue 以编程方式注入到表单中（就像它可以如何处理静态字段一样）

Answer 1

这里是更新代码https://codesandbox.io/s/cocky-sun-e57dm?fontsize=14&hidenavigation=1&theme=dark

这里有一些事情要做

1. 您需要使用 2 初始化 id，因为您需要 2 个初始字段。
2. 你需要用数组中的两个值来初始化keys字段值，而不是[]之类的

getFieldDecorator("keys", { initialValue: [0, 1] });

1. 使用 this 为可用字段分配初始值

getFieldDecorator(`names[${k}]`, {
  validateTrigger: ["onChange", "onBlur"],
  initialValue: valueOfFormToEdit[k] || '',
  rules: [
    {
      required: true,
      whitespace: true,
      message: "Please input passenger's name or delete this field."
    }
  ]
})

更新

针对新的要求更新了沙盒：D

https://codesandbox.io/s/friendly-kirch-9gq1b?fontsize=14&hidenavigation=1&theme=dark