Reactjs:立即使用更新的状态数据(来自存储）

Reactjs: using updated state data (from store) immediately

本文关键字：数据 存储 状态 更新 Reactjs      更新时间：2023-09-26

我正在使用 react with flux。

我的组件中有一个函数，该函数调用在单击时执行操作：

  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
        });
    });
},

对于更干净的解决方案，您可以研究承诺。

相关文章：