Javascript 状态未立即更新

我搞不清楚我做错了什么。我有一个事件触发一个函数来改变几个值的状态，这样我就可以触发一个API调用；但是，函数第一次运行时，状态不会改变。函数第二次运行时，将设置上一次运行的状态更改。是什么导致了这次延误

因此，正如您在下面看到的

handleFilterChange

接收来自事件的值，我可以验证这些值是否被正确接收；但是，如果我在设置后立即检查状态值，我可以看到它是未定义的。当事件再次发生时；但是，我可以看到，原来的状态已经发生了变化，但是第二个状态没有发生变化。那么为什么要调用setState两次才能真正设置状态呢

var GridView = React.createClass({
  getInitialState: function() {
    window.addEventListener("scroll", this.handleScroll);
    return {
      data: [],
      page: 0,      //for pagination
      loadingFlag: false,
    };
    },

  getMainFeed: function() {

...

 }, //end function
 getFilteredItems: function() {
  ...

}, //end function
  componentWillMount: function() {

  },
  listenForFilterChange: function() {
    window.addEventListener("selectedFilterChange", this.handleFilterChange, false);
  },
  componentWillUnmount: function() {
    window.removeEventListener("selectedFilterChange", this.handleFilterChange, false);
  },
  handleFilterChange: function(filter) {
   //alert(filter.detail.filterType);
   //Convert Data for getFilteredItems
   //(EventType, Category, Buy, Inspiration) {
   switch (filter.detail.filterType) {
     //alert(filter.detail.filterType);
    case 'category':
      this.setState({
        itemCategory: filter.detail.filterSelected,
      });
      break;
    case 'event':
      this.setState({
        eventType: filter.detail.filterSelected,
      });
      break;
    case 'type':
      if (0){
        this.setState({
          filterBuy: 1,
          filterInspiration: 0,
        });
      }
      if (1){
        this.setState({
          filterBuy: 0,
          filterInspiration: 1,
        });
      }
      if (2){
        this.setState({
          filterBuy: 1,
          filterInspiration: 1,
        });
      }
      break;
    case 'trending':
      this.setState({
        itemCategory: filter.detail.filterSelected,
      });
      break;
   }

   this.getFilteredItems();
 },
  componentDidMount: function() {
    this.listenForFilterChange();
...
  },
  handleScroll:function(e){
...
  },
  componentDidUpdate: function() {
...
  },
  render: function() {
      return (
        <div id="feed-container-inner">
          <GridMain data={this.state.data} />
        </div>

      );
    }
  });

var GridView=React.createClass({
getInitialState:函数（）{
window.addEventListener（“滚动”，this.handleScroll）；
返回{
数据：[]，
页面：0，//用于分页
加载标志：false，
};
},
getMainFeed:function（）{
...
}，//结束函数
getFilteredItems:函数（）{
...
}，//结束函数
componentWillMount:function（）{
},
listenForFilterChange:function（）{
window.addEventListener（“selectedFilterChange”，this.handleFilterChange，false）；
},
componentWillUnmount:function（）{
window.removeEventListener（“selectedFilterChange”，this.handleFilterChange，false）；
},
handleFilterChange:功能（过滤器）{
//警报（filter.detail.filterType）；
//转换getFilteredItems的数据
//（事件类型、类别、购买、灵感）{
开关（filter.detail.filterType）{
//警报（filter.detail.filterType）；
个案‘类别’：
这是我的国家({
itemCategory:filter.detail.filterSelected，
});
打破
“事件”案例：
这是我的国家({
eventType:filter.detail.filterSelected，
});
打破
案例“类型”：
如果（0）{
这是我的国家({
过滤器买方：1，
过滤呼吸：0，
});
}
如果（1）{
这是我的国家({
filterBuy:0，
过滤呼吸：1，
});
}
如果（2）{
这是我的国家({
过滤器买方：1，
过滤呼吸：1，
});
}
打破
案例“趋势分析”：
这是我的国家({
itemCategory:filter.detail.filterSelected，
});
打破
}
这个.getFilteredItems（）；
},
componentDidMount:function（）{
this.listenForFilterChange（）；
...
},
handleScroll:函数（e）{
...
},
componentDidUpdate:函数（）{
...
},
render:function（）{
返回(
);
}
});

不必调用setState两次。阅读您的代码，我无法准确推断出错误所在，但我可以建议：

Console.log您的状态在渲染函数中，如果您想知道其中的内容

再次检查事件中的内容（触发了什么情况以及是否真的触发了）。 3.检查另一个函数（另一个设置状态）是否未覆盖要在handlefilterChange中设置的状态

我打赌您的筛选器没有接收到正确的值，首先接收到未定义的filter.detail.filterSelected，然后是另一个已定义的值。。。 检查filter.detail.filterSelected中的内容我在您只检查filter.detail.filterType的注释中看到

无论如何，你的问题不是由于设置状态，而是从你的数据我很确定

---

让我知道它是否有帮助

设置状态

是异步的，因此更改不会立即反映在状态中：

setState（）不会立即改变this.state，但会创建 挂起状态转换。调用此后访问this.state 方法可能返回现有值

---

如果您需要确认状态或根据状态更改执行逻辑，请使用所述的回调参数。

谢谢，@David。我没有意识到，这现在更有意义了。François，我已经完成了这些检查，问题是

setState

是异步的，所以我必须使用回调函数。再次感谢您的帮助。好的，渲染中的console.log可以工作，但Bill Walters的回答给出了原因，并且更准确。