Как поделиться значениями Formik initialValues ​​между различными компонентами до или после того, как они были установлены? - PullRequest
Новая
       5

Как поделиться значениями Formik initialValues ​​между различными компонентами до или после того, как они были установлены?

2 голосов
/ 13 марта 2020

У меня проблемы с пониманием Formik и как он управляет состоянием. У меня есть несколько компонентов в моем приложении, которые имеют формы. Эти формы имеют много совпадений по назначению. Когда я получаю значения в одном компоненте, я бы хотел, чтобы другие компоненты тоже имели доступ к этим значениям.

Я размышлял об использовании useState или useReducer для каждого и всех значений, но прочитал и обнаружил, что Formik управляет самим состоянием? Так что моя проблема здесь была бы на самом деле просто получить доступ к значениям из «initialValues» в определенном компоненте в разных компонентах? 

import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

<Formik 
     initialValues={{ name: '', ... }} //how can I use these values in other components? 
                                       //how can I 'save' them so that if the user 
                                       //accesses another page with a form, 
                                       //the data that has already been provided is accessible?

     onSubmit={(values, { setSubmitting }) => {
         setTimeout(() => {
            alert(JSON.stringify(values, null, 2)); 
            setSubmitting(false);
         }, 400)
     }}
>

  <Form>
    <label htmlFor="name">Name</label>
      <Field maxLength="51"
             name="name"  
             type="text" 
      />
      <ErrorMessage name="name" />
      ...
  </Form>

</Formik>

1 Ответ

0 голосов
/ 14 марта 2020

Как следует из названия проп, это просто начальные значения формы, когда форма монтируется. Formik действительно сохраняет состояние, так как отслеживает входные значения, состояние касания и ошибки и то, как они обновляются, управляя элементами ввода. Поскольку Formik использует контекстный API внутри, состояние Formik доступно только дочерним элементам компонента. Чтобы получить доступ к этому состоянию Formik (иногда совместно именуемому сумкой Formik), вы можете использовать шаблон пропеллера рендера ( пример, видимый здесь ) или useFormikContext hook

В конечном счете, если вы требуется несколько компонентов (например, реализация нескольких разных страниц), вам нужно будет передавать состояние между различными компонентами. Я бы посоветовал не упускать из виду тот факт, что вы можете иметь несколько компонентов в одном компоненте, которые визуально разделены на странице ( пример ). Если вы действительно хотите передать состояние между различными компонентами, вы можете сделать это несколькими способами.

  1. Сохранение и повторное извлечение из API (хорошо для разных страниц, когда используется API)
  2. Сохранение в реагирующем контексте, который инкапсулирует все формы, которым нужны данные - вы можете обновить контекст либо в «onSubmit», либо, если вы используете реквизиты рендеринга, так как вы можете обновлять контекст при каждом повторном рендеринге (вызвано каким-либо изменением)

Если вы сделаете это, вам также следует прочитать реквизит для повторной инициализации компонента - https://jaredpalmer.com/formik/docs/api/formik#enablereinitialize -boolean

...