gpt4 book ai didi

javascript - 在 AJAX 请求后,如何使用 react 上下文 api 值更新 Formik 初始值?

转载 作者:行者123 更新时间:2023-12-03 16:39:14 25 4
gpt4 key购买 nike

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

为此,我决定使用 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 值?

最佳答案

您应该设置 enableReinitialize支柱。

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

关于javascript - 在 AJAX 请求后,如何使用 react 上下文 api 值更新 Formik 初始值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55386987/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com