Как вы обновляете начальные значения Formik значениями api реагирующего контекста после AJAX-запроса?

Question

Проблема, с которой я сталкиваюсь, заключается в том, что я хочу имитировать поведение FlaskLogin current_user в React на протяжении всего процесса обработки компонента. Для тех, кто не знаком с FlaskLogin, current_user просто сохраняет сеанс пользователя, который в данный момент вошел в систему.

Для этого я решил использовать контекстный API React. То, что я делаю, находится на компоненте верхнего уровня, я обертываю UserProvider вокруг приложения следующим образом:

<UserProvider value={this.state.user}>
    // Main Component.
</UserProvider>

Состояние определяется в конструкторе:

constructor() {
    super();
    this.state = {
      user: {
        id: -1,
        username: ‘test username’,
        email: 'test email’,
      },
    };
  }

И затем я вызываю Ajax-запрос в componentDidMount, чтобы получить current_user.

componentDidMount() {
    const state = this;
    post('/get_current_user').then(function success(data) {
      state.setState({
        user: {
          id: data.data.id,
          username: data.data.username,
          email: data.data.email,
        },
      });
    }).catch(function exception() {
      throw new Error('Failed to grab current user.');
    });
  }

Я могу получить этот обновленный контекст по всему приложению. Это прекрасно работает для компонента «ProfilePicture», так как он захватывает правильное состояние, но не работает для установки начальных значений с помощью Formik. В Formik я создаю обновление имени пользователя и формы электронной почты. Проблема заключается в том, что Formik получает значения api контекста ДО того, как api контекста был обновлен через запрос AJAX. Таким образом, «test username» будет отображаться в поле «username», а «test email» будет отображаться в поле «email». Моя форма Formik выглядит следующим образом:

const UserSettingsProfileForm = () => {
  return (
    <UserConsumer>
      {context => (
        <Formik
          initialValues={{ email: context.email, username: context.username }}
          validationSchema={userSettingsFormSchema}
          onSubmit={userSettingsOnSubmit}
          render={userSettingsForm}
        >
        </Formik>
      )}
    </UserConsumer>
  );
};

У кого-нибудь есть предложения, как это исправить, чтобы отображались правильные значения контекста api?