Как вставить одну и ту же редукционную форму несколько раз на страницу?

У меня возникла проблема с встраиванием нескольких форм на одну страницу. Я заметил, что configForm выполняется один раз, даже с несколькими формами на странице, поэтому я не могу динамически генерировать разные имена форм.

Снимок экрана, показывающий несколько текстовых полей, связанных друг с другом.

function configForm(){
  const uuid = UUID.generate();

  const config = {
    form:`AddCardForm_${uuid}`,
    fields:['text'],
    validate:validate
  }

  return config;
}

export default reduxForm(configForm(), mapStateToProps, {togglePanelEditMode, addCardToPanel})(CardFormContainer);

Как добавить формы, чтобы они не зависели друг от друга?

Ответ 1

Существует два способа встраивания одной и той же формы несколько раз на страницу.

1. Использование formKey (форма Redux 5)

formKey является официальным способом выполнения этого при использовании [email protected] (или ниже). Вы должны передать ключ от родителя, чтобы определить форму:

panels.map(panel =>
  <PanelForm key={panel.uuid} formKey={panel.uuid} initialValues={panel} />
                              ^^^^^^^ 
                       declare the form key
)

Ваше определение формы будет:

reduxForm({form: "AddCardForm", fields: ["text"], validate})

Однако этот шаблон был удален из [email protected].

2. Используя уникальное имя form (Redux Form 5 и выше)

Следующий шаблон - рекомендуемый способ идентификации форм с Redux Form 6. Он полностью совместим с предыдущими версиями.

panels.map(panel =>
  <PanelForm key={panel.uuid} form={`AddCardForm_${panel.uuid}`} initialValues={panel} />
                              ^^^^ 
                    declare the form identifier
)

Ваше определение формы будет:

reduxForm({fields: ["text"], validate})
// No `form` config parameter here!