しかし、私が直面している問題は、React の FlaskLogin current_user の動作をコンポーネント ツリー全体で模倣したいということです。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 では、ユーザー名とメールの更新フォームを作成しています。問題は、コンテキスト API が AJAX リクエストを通じて更新される前に、Formik がコンテキスト API 値を取得することです。そのため、ユーザー名フィールドには「テスト ユーザー名」が表示され、メール フィールドに「テスト メール」が表示されます。私の Formik フォームは次のとおりです。
const UserSettingsProfileForm = () => {
return (
<UserConsumer>
{context => (
<Formik
initialValues={{ email: context.email, username: context.username }}
validationSchema={userSettingsFormSchema}
onSubmit={userSettingsOnSubmit}
render={userSettingsForm}
>
</Formik>
)}
</UserConsumer>
);
};
正しいコンテキスト API 値が表示されるようにこれを修正する方法について、何か提案はありますか?
ベストアンサー1
プロップを設定する必要がありますenableReinitialize。
<Formik
initialValues={{ email: context.email, username: context.username }}
enableReinitialize