title: React setState not working on first try, but works on second?
body: <p>I have the <code>handleSelection</code> method called when a button is clicked, however, if I click the button once the state does not get set when it gets to <code>this.setState({selectedFoods: newSelections});</code>. Everything else in the method executes correctly (as my various console.logs tell me :) ). When the button is clicked a second time, everything in the method gets executed again and the <code>setState</code> works.</p>
  
  <pre><code>var Flavor = React.createClass({
    getInitialState: function() {
      return { foods: {}, selectedFoods: [], affinities: [] };
    },
          componentDidMount: function() {
              $.ajax({
                url: this.props.url,
                dataType: 'json',
                cache: false,
                success: function(data) {
                  this.setState({foods: data});
                }.bind(this),
                error: function(xhr, status, err) {
                  console.error(this.props.url, status, err.toString());
                }.bind(this)
              });
            },
    componentDidUpdate: function () {
      $('#select-food').selectize({
        onChange: this.handleSelection
        }
      );
    },
    handleSelection: function (e) {
      if (e.target) {
        var selectedFood = e.target.id;
      } else {
        var selectedFood = e;
      }
      console.log(selectedFood);
  
      if (this.state.foods[selectedFood]) {
        var selections = this.state.selectedFoods;
        var newSelections = selections.concat(selectedFood);
        console.log("newSelections: "+newSelections)
        var state = Object.assign(this.state, {selectedFoods: newSelections});
        this.setState(state);
        console.log("state: "+this.state.selectedFoods)
        this.handleAffinities();
      } else {
        console.log("** "+selectedFood+" **");
      }
  
    },
    handleAffinities: function() {
  
      console.log("selectedFoods: "+this.state.selectedFoods.length)
      if (this.state.selectedFoods.length &gt; 0) {
        var allAffinities = this.state.selectedFoods.map((food) =&gt; {
          return this.state.foods[food];
        });
        console.log(allAffinities.length);
        console.log(allAffinities);
  
        var commonAffinities = allAffinities[0];
  
        allAffinities.forEach((affinities) =&gt; {
          commonAffinities = commonAffinities.filter((n) =&gt; {
            return affinities.indexOf(n) != -1;
          });
        })
  
        this.setState({affinities: commonAffinities});
      } else {
        this.setState({ affinities: [] });
      }
  
    },
    handleRemove: function(food) {
      var selectedFoods = this.state.selectedFoods;
      var index = selectedFoods.indexOf(food);
      var updatedSelection = selectedFoods.splice(index, 1);
      this.setState({selectedFoods: selectedFoods});
      this.handleAffinities();
    },
  </code></pre>
  
  <p>Why does everything execute correctly the first time except my <code>setState</code> function? And why it work on the second click?</p>