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

Posted 2023-02-22

【中文标题】Reactjs：立即使用更新的状态数据（来自商店）

【英文标题】：Reactjs: using updated state data (from store) immediately

【发布时间】：2016-11-16 11:24:57

【问题描述】：

我正在使用助焊剂反应。

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

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

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

【问题讨论】：

getEventById 是否返回一个承诺？如果是这样，那么您应该使用 then 关键字。为了清楚起见，您知道 AJAX 调用是异步的，对吗？ JS 不等待getEventById 返回值；它启动 ajax 调用，然后继续执行代码

【参考方案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。