Question

我正在使用与助焊剂反应。

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

  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操作后，它会更新我的商店。我的印象是，在标题分配和日志发生后，它会更新我的商店。

如何在调用操作后访问此信息，以便我可以立即向客户端显示信息？

Answer 1

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。

Reactjs：立即使用更新的状态数据（来自商店）

1 个答案: