在AJAX请求之后，如何使用react context api值更新Formik初始值？

Question

我面临的问题是，我想在整个树状组件中模仿FlaskLogin current_user在React中的行为。对于不熟悉FlaskLogin的任何人，current_user只需存储当前登录用户的会话即可。

为此，我决定使用React上下文API。我要做的是在顶级组件上，将UserProvider包裹在应用程序周围，如下所示：

<UserProvider value={this.state.user}>

    // Main Component.

</UserProvider>

状态在构造函数中定义：

constructor() {

    super();

    this.state = {

      user: {

        id: -1,

        username: ‘test username’,

        email: 'test email’,

      },

    };

  }

然后，我在componentDidMount中调用Ajax请求以获取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在通过AJAX请求更新上下文api之前获取了上下文api的值。因此，“测试用户名”将显示在用户名字段中，而“测试电子邮件”将显示在电子邮件字段中。我的Formik表格如下：

const UserSettingsProfileForm = () => {

  return (

    <UserConsumer>

      {context => (

        <Formik

          initialValues={{ email: context.email, username: context.username }}

          validationSchema={userSettingsFormSchema}

          onSubmit={userSettingsOnSubmit}

          render={userSettingsForm}

        >

        </Formik>

      )}

    </UserConsumer>

  );

};

有人对如何解决此问题有任何建议，以便显示正确的上下文api值吗？