React-final-form-array, как повторно отрендерить форму на основе нового состояния

Я использую react-final-form-arrays для создания системы динамических полей, пока сценарий будет таким:

  1. Пользователь нажимает кнопку, чтобы открыть модальный редактор (Добавить / удалить настраиваемое поле с помощью react-final-form-array. После этого нажмите «Сохранить», и основная форма обновится.

Основная форма также использует react-final-form-array для циклического просмотра полей и рендеринга без добавления кнопки «Добавить / удалить».

Я попытался взять отсюда очень пример: https://codesandbox.io/s/react-final-form-field-arrays-wbhgq?fontsize=14

В этом примере <Form1 /> фактически является формой редактора. После отправки <Form2 /> будет отображаться с обновленными полями.

Если я перезагружаю страницу, она работает, но, конечно, это не то, что должно было быть.

Что мне нужно изменить, чтобы обновить <Form2 />?

заранее спасибо


reactjs javascript dynamic react-final-form
person Duc Hong    schedule 07.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не уверен, правильно ли я вас понял, но основная идея - создать хранилище для initialValues, используя useState или состояние компонента класса.

  const App = () => {
    const [initialValues, setInitialValues] = useState();

    return (
      <Styles>
        <Form1 onSubmit={setInitialValues} />
        <Form2 initialValues={initialValues} />
      </Styles>
    );
};

Если это не то, чего вы хотите достичь, объясните подробно

person Mateusz Krzyżanowski    schedule 07.10.2019
comment
react-final-form использует собственное внутреннее управление состоянием, поэтому нет необходимости иметь внешнее состояние, подобное вашему предложению, обычно я просто передаю данные прямо в initialValues prop, и он работает. Но здесь в этом случае поля являются динамическими на основе модального внешнего вида конфигурации. Я пробовал регистрировать данные перед их передачей в ‹Form /›, и это правильно с обновленными, но в пользовательском интерфейсе они не будут повторно отображаться с полями обновления; ( - person Duc Hong; 08.10.2019
comment
Подробно опишите поток. Пользователь открывает модальное окно, в котором можно добавить поля, такие как form1, и что дальше? Я знаю выпускные работы. Мой пример основан на том, что я понял из вашего вопроса. В вашем примере хранилище меняет свое значение, но компонент не знает, что ему нужно повторно отрендерить. Если вы хотите инициализировать form2 данными из from1, это самое простое решение. - person Mateusz Krzyżanowski; 08.10.2019
comment
спасибо за ваше предложение, мне удалось решить проблему, это была моя ошибка, установив keepDirtyOnReinitialize на true - person Duc Hong; 08.10.2019
comment
Привет. Автор здесь. Этот ответ верен, если OP действительно хочет иметь вторую форму подтверждения. Так работает Пример мастера. - person Erik R.; 09.10.2019