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

不过，我面临的问题是，我想在整个组件树中模拟当前用户在React中的行为。对于任何不熟悉FlaskLogin的用户，

current_user

只存储当前登录用户的会话

为此，我决定使用React上下文api。我所做的是在顶级组件中，我在应用程序周围包装一个UserProvider，如下所示：

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

然后我在componentDidMount中调用一个Ajax请求来获取当前用户

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中，我创建了一个更新用户名和电子邮件表单。问题在于，在通过AJAX请求更新上下文api之前，Formik获取上下文api值。因此，“测试用户名”将显示在用户名字段中，“测试电子邮件”将显示在电子邮件字段中。我的表格如下：

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

constusersetingsprofileform=（）=>{
返回(
{context=>(
)}
);
};

---

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

您应该设置

启用重新初始化

属性

<Formik
  initialValues={{ email: context.email, username: context.username }}
  enableReinitialize

---

根据官方的
github问题
来自
Formik
您应该添加
enableReinitialize
prop:
对于将来找到此答案的任何人，解决方案是将
enableReinitialize
prop设置为true。这应该是启用重新初始化（注意大写字母“R”）
<Formik
  initialValues={{ email: context.email, username: context.username }}
  enableReinitialize