--まずタイトルが曖昧で申し訳ありません。私が抱えている問題は、タイトルの付け方が本当に混乱しています。私は編集を受け付けています。基本的に、私はreact-reduxを使用しており、データベース内のいくつかのコンテンツを更新するモーダルを持っています. 更新時に、すべてのレデューサーの状態をデフォルトにしてモーダルを閉じます。(更新時にすべての値をデフォルトに設定する関数をトリガーしているので、これは簡単です)しかし、更新時にモーダルを閉じて、応答からの更新またはエラーメッセージで toastr を表示したいと思います。toastr のコンポーネントとアクションをセットアップしました。
問題は、toastr がメッセージを表示しないことです。これは、ストアからの一定のアクションと一致する前に、モーダルのレデューサーが既に既定に設定されているためです。これを克服するための最良のアプローチは何でしょうか?
Modal.jsx
//update
updateConfig() {
this.props.updateConfigNode(node, latestConfigData); //update action
this.closeModal();
}
closeModal() {
this.props.status(false); //Close modal
this.props.update(''); //Set update action status 'updated or error' to ''
}
Toastr.jsx
componentDidUpdate() {
this.routerConfigNotification(this.props.config); //Getting from store
}
configNotify(config) {
const message = checkForRouterConfigUpdateState(config);
if(message) {
this._addNotificationNormal(message.title, message.type, message.text);
}
}
ユーティリティ
export function checkForRouterConfigUpdateState(routerConfig) {
let message = {};
let messageText;
switch (_.get(routerConfig, 'updateStatus')) {
case '_error':
messageText = 'An error has been occurred while updating configuration';
return message = {
mode: 'normal',
title: 'Error',
type: 'info',
status: _.get(routerConfig, 'updateStatus'),
text: messageText
};
case '_updated':
messageText = 'Successfully Updated';
return message = {
mode: 'normal',
title: 'Updated',
type: 'info',
status: _.get(routerConfig, 'updateStatus'),
text: messageText
};
}
}
私は他のライフサイクル更新方法を試しましたが、この問題を解決するのに最も近いのは、ハックであることがわかっているsetTimeout関数を使用することであり、これらの種類の非同期問題に取り組む方法があると確信しています. 前もって感謝します。