Reactjs:立即使用更新的状态数据(来自商店)
Reactjs: using updated state data (from store) immediately
我正在使用助焊剂反应。
我的组件中有一个函数调用在单击时执行操作:
onClickEventEdit: function(itemId) {
ScheduleActions.getEventById(itemId) // this ultimately is set into `currentEventById` state
var title = this.state.currentEventById['title'] || ""
console.log(title) // logs nothing
console.log(this.state.currentEventById) //logs empty object {}
// then show modal
$('#eventSelectedModal').modal({
show: true
});
},
我的 ScheduleAction
是一个 ajax 调用来检索事件信息。 Ajax 操作完成后,它会更新我的商店。我的印象是它会在标题分配和日志发生后更新我的商店。
调用操作后如何访问此信息以便我可以立即将信息显示给客户端?
AJAX 调用(技术上 XMLHttpRequests)是异步执行的。这意味着,当 HTTP 调用仍在等待响应时,您的同步代码将继续 运行。这会导致您期望的行为。
最简单的解决方案是使用异步调用完成时调用的回调参数扩展您的 getEventById()
方法。您现在可以将调用后应执行的代码移动到回调中,有效地延迟其执行;
onClickEventEdit: function(itemId) {
ScheduleActions.getEventById(itemId, function() {
var title = this.state.currentEventById['title'] || ""
console.log(title) // logs nothing
console.log(this.state.currentEventById) //logs empty object {}
// then show modal
$('#eventSelectedModal').modal({
show: true
});
});
},
要获得更简洁的解决方案,您可以查看 Promises。
我正在使用助焊剂反应。
我的组件中有一个函数调用在单击时执行操作:
onClickEventEdit: function(itemId) {
ScheduleActions.getEventById(itemId) // this ultimately is set into `currentEventById` state
var title = this.state.currentEventById['title'] || ""
console.log(title) // logs nothing
console.log(this.state.currentEventById) //logs empty object {}
// then show modal
$('#eventSelectedModal').modal({
show: true
});
},
我的 ScheduleAction
是一个 ajax 调用来检索事件信息。 Ajax 操作完成后,它会更新我的商店。我的印象是它会在标题分配和日志发生后更新我的商店。
调用操作后如何访问此信息以便我可以立即将信息显示给客户端?
AJAX 调用(技术上 XMLHttpRequests)是异步执行的。这意味着,当 HTTP 调用仍在等待响应时,您的同步代码将继续 运行。这会导致您期望的行为。
最简单的解决方案是使用异步调用完成时调用的回调参数扩展您的 getEventById()
方法。您现在可以将调用后应执行的代码移动到回调中,有效地延迟其执行;
onClickEventEdit: function(itemId) {
ScheduleActions.getEventById(itemId, function() {
var title = this.state.currentEventById['title'] || ""
console.log(title) // logs nothing
console.log(this.state.currentEventById) //logs empty object {}
// then show modal
$('#eventSelectedModal').modal({
show: true
});
});
},
要获得更简洁的解决方案,您可以查看 Promises。