2

我无法弄清楚我在这里做错了什么。我有一个事件触发一个函数来改变几个值的状态，这样我就可以触发一个 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>

      );
    }
  });
4

2 回答 2

2

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

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。在调用此方法后访问 this.state 可能会返回现有值。

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

于 2015-08-13T08:37:05.850 回答
0

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

  1. Console.log如果您想知道其中的内容，请在渲染功能中记录您的状态。
  2. 再次检查您的事件中的内容（触发了什么情况以及是否真的触发了）。3.检查另一个函数（另一个setState）是否没有覆盖您要在handlefilterChange中设置的状态。

我敢打赌，您的过滤器没有收到正确的值，首先收到未定义的 filter.detail.filterSelected 然后另一个定义的...检查 filter.detail.filterSelected 我在评论中看到您只检查了 filter.detail.filterType

无论如何，您的问题不是由于 setState 而是由于我很确定您的数据。

让我知道它是否有帮助

于 2015-08-13T05:00:56.527 回答