Почему Formik вызывает рекурсию при инициализации?

Question

[Сергей]

Есть компонент, в котором присутствует форма

<Formik
    onSubmit={...}
    enableReinitialize
    initialValues={oldValues}
>
    <CurrentForm />
</Formik>;

И сам currentForm

function CurrentForm() {
    const { values, setFieldValue, handleSubmit } = useFormikContext();
    return (
      <div onSubmit={handleSubmit}>
          <Input1 />
          <Input2 />
          <Input3 />
          <Button />
      </div>
    );
}

После ввода всех значений, я беру values и сохраняю все значения в redux. Затем, мне в этой же форме, нужно проставить другие значения из Redux. Для этого нужно поменять initialValues. Соответственно oldValues хочу сменить на новые newValues. Тогда нужно сделать переинит Formika, но простановка enableReinitialize при новом рендере компонента вызывает рекурсию(

В чем может быть причина или есть варианты как избежать данной проблемы?

Answer 1

[Александр Макаров]

Первое что бросается в глаза, это то что за место тега form используется div. Замените, т.к. это ошибка

function CurrentForm() {
    const { values, setFieldValue, handleSubmit } = useFormikContext();
    return (
      <form onSubmit={handleSubmit}>
          <Input1 />
          <Input2 />
          <Input3 />
          <Button />
      </form >
    );
}

Comments

[Сергей]

Это же никак не влияет на проблему. Просто быстро накидан код для примера