我面临的问题是,我想在整个树状组件中模仿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值吗?
添加回答
举报
0/150
提交
取消