Как воссоздать форму с полями Dynami c для редактирования в реагировать и (R c -формы)

Question

После использования компонента формы antd (который зависит от rc-form) для создания формы, мне нужно также воспользоваться формой редактирования, я не могу найти никаких ресурсов о том, как инициализировать форму antd со значениями формы, которые я иметь (особенно динамические c поля)

Я обнаружил, что использование form.setFieldsInitialValue(theEditValues); будет правильно инициализировать некоторые поля формы с данными правильно (например, раскрывающийся список с множественным выбором), но не нормально выпадающие списки и, самое главное, все динамические c поля не созданы , что дает предупреждение о том, что вы не можете установить данные поля перед созданием поля

Есть ли предпочтительный способ обработки сценария редактирования? так что:

1 - для воссоздания динамических c полей на основе переданных данных до

2 - для синхронизации c всей формы с предоставленными данными

Я добавил песочницу, чтобы показать, что я имею в виду , в основном, если у меня есть значения формы, и я хочу инициализировать форму с полями Dynami c со значениями, данными

Примечание:

Нам нужно обработать универсальный c случай, когда пользователь ввел любое количество динамических c полей, и мы хотим воспользоваться страницей формы редактирования с заданной информацией

Обновление:

Я обновил пример в новой песочнице , чтобы показать, что подразумевается под динамической обработкой значений. Я не знаю динамический ввод c в сценарии редактирования, это может быть один поле или много, поэтому после получения данных из API, они должны быть введены в форму программно с использованием form.setFieldsValue (так же, как это можно сделать для полей * * * * *)

Answer 1

Вот обновленный код https://codesandbox.io/s/cocky-sun-e57dm?fontsize=14&hidenavigation=1&theme=dark

Вот что нужно сделать

1. Вам нужно инициализировать id с 2, так как вам нужно 2 начальных fields.
2. Вам нужно инициализировать keys значение поля двумя значениями в массиве вместо [], как

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

назначить начальное значение доступным полям, используя это

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