Как проверить, когда formik инициализируется и готов? - PullRequest
0 голосов
/ 27 октября 2019

Я использую Formik для обработки форм в моем приложении. С useRef мне удается вызывать реквизиты Formik за пределами Formik.

const form = useRef(null);
const formProps = form.current;

useEffect(() => {
    getUser(props.match.params.userId)
}, []);

console.log(formProps)

<Formik
  ref={form}
  initialValues={userData}
  validationSchema={validationSchema}
  onSubmit={handleSubmit}>
     {props => (
          <Form>

           </Form>
      )}
</Formik>

С URL-адреса я получаю идентификатор пользователя, извлекаю этого пользователя с сервера и сохраняю его в хранилище резервов. Затем эти данные устанавливаются в качестве начального значения Formik. Когда из другого ракурса я перехожу к этому с:

  props.history.push(`users/${userId}/update`); 

консольный журнал записывает ноль, а когда я обновляю страницу, я получаю результат Formik {}. Не знаю, почему я получаю нулевой результат, может быть, потому что он запускает, потому что formik готов?

1 Ответ

0 голосов
/ 27 октября 2019

Это функциональный компонент, поэтому наш код выполняется построчно.

Наша функция выполняется сначала: const form = useRef(null);, затем const formProps = form.current;. После этого выполните console.log(formProps) с form.current, который не инициализирован (что равно null). Наш объект ref получает ссылку / значение, когда функция компонента достигает / выполняет строки с <Formik/> представлением JSX.

Console.log() печатает значения ссылки Formik после первого повторного отображения компонента (например, когда мы меняем состояние, подставляем или иногдаобновить страницу (зависит от того, как и где определен наш компонент).

...