React setState không hoạt động trong lần thử đầu tiên, nhưng hoạt động trên giây?

Question

Tôi có phương thức handleSelection được gọi khi nhấp vào nút, tuy nhiên, nếu tôi nhấp vào nút khi tiểu bang không được đặt khi nó được đặt thành this.setState({selectedFoods: newSelections});. Mọi thứ khác trong phương thức thực thi một cách chính xác (như các giao diện điều khiển khác nhau của tôi cho tôi biết :)). Khi nút được nhấp lần thứ hai, mọi thứ trong phương thức sẽ được thực hiện lại và công việc setState sẽ hoạt động.

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 > 0) { 
     var allAffinities = this.state.selectedFoods.map((food) => { 
     return this.state.foods[food]; 
     }); 
     console.log(allAffinities.length); 
     console.log(allAffinities); 

     var commonAffinities = allAffinities[0]; 

     allAffinities.forEach((affinities) => { 
     commonAffinities = commonAffinities.filter((n) => { 
      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(); 
    }, 

Tại sao mọi thứ thực hiện chính xác lần đầu tiên ngoại trừ chức năng setState? Và tại sao nó hoạt động trên nhấp chuột thứ hai?

Answer 1

Trạng thái đang thay đổi chính xác theo cách được yêu cầu. Vấn đề là các tuyên bố console.log của bạn ngay lập tức sau khi bạn gọi tới số setState đang kích hoạt trước khi cài đặt trạng thái mới.

Từ docs:

setState() không ngay lập tức đột biến this.state nhưng tạo ra một chuyển trạng thái chờ giải quyết. Truy cập this.state sau khi gọi phương thức này có khả năng trả về giá trị hiện tại.

Nếu bạn muốn kích hoạt câu lệnh console.log sau khi quá trình chuyển đổi trạng thái hoàn tất, hãy chuyển hàm như gọi lại setState().

this.setState({selectedFoods: newSelections},() => { 
    console.log(this.state.selectedFoods); 
});