componentDidUpdateからの逆データフローを試みるときの無限ループ

Question

私はすべての現在のチェックされたチェックボックスで状態変数を維持するチェックボックスグループを持っています。そして、ユーザがボックスをチェックすると、componentDidUpdate（）リストを使用してajax呼び出しを行い、カウンタを設定します。しかし、これは私がなぜそれを理解していない無限ループを誘発しています。以下

コードである： VAR CheckBoxGroup = React.createClass（{

getInitialState : function(){ 
    var states = {}; 
    var that = this; 
    _.map(this.props.defaultValues.checkboxes, function (choice, key) { 
     states[key] = choice.checked; 
    }); 
    return states; 
}, 

componentDidUpdate: function() { 
    console.log("component updated!"); 
    this.getCheckedValues(); 
}, 

componentWillUpdate : function(){ 
    console.log("component will update!"); 
    //this.getCheckedValues(); 

}, 

componentWillReceiveProps : function(nextProps){ 
    console.log("componentRecievedProps!!!!!!!!"); 
}, 

getCheckedValues: function() { 
    var checkedObjArray = []; 
    var self = this; 

    // console.log("state",self.state); 

    var checkedArray = _.filter(_.keys(this.state), function (key) { 
     return self.state[key] 
    }); 

    this.props.updateCount(checkedArray); 
    //console.log("CheckboxFieldGroup.getCheckedValues() = " + checkedArray); 
}, 

handleCheckBoxChange: function(prevState,nextState){ 
    var stateChanged = {}; 
    stateChanged[prevState] = nextState; 
    //console.log("stateChanged",stateChanged); 
    this.setState(stateChanged); // Automatically triggers render() !! 
}, 

renderChoices: function(){ 
    var that = this; 
    let choices = _.map(this.props.defaultValues.checkboxes,function(choice,key){ 
     var props = {key : key, values : {name: this.props.defaultValues.name,value:key,label:choice.label}, onNewTick:this.handleCheckBoxChange}; 
     // console.log(props); 
     return <CheckBox {...props} />; 
}.bind(this)); 
return choices; 

}、

VARサイドバー= React.createClass（{

getInitialState: function(){ 
    return {total_count : 0}; 
}, 

componentDidMount : function(){ 
    this.getAirportDetails([]); 
}, 

getAirportDetails: function(args){ 
    console.log("Arguments",args); 
    var url = "/airportdetails_list/" 
    var new_url = _.reduceRight(args,function(a,b){ 
      return a+b+"/"; 
    },url); 

    console.log("formatted url",new_url); 
    $.ajax({ 
     url: new_url, 
     dataType: "json", 
     type: 'GET', 
     headers: { 'Api-User-Agent': 'Example/1.0' }, 
     success: function(data) { 
      console.log(data); 
      this.setState({total_count:data.length}); 
     }.bind(this), 
     error: function(xhr,err){ 
      console.error("Error occured file fetching!"); 
      console.error("Error occured ",err); 
      console.error(xhr.responseText); 

     } 

    }); 

}, 


render: function() { 

    var checkboxes = ['All','Civil Airports','Military Airport','Harbours','Airports','Railway Stations','Sea Plane Base']; 
    var radiobuttons = ['Elevation','DirectFlight','Rating']; 

    let checkBoxItems = checkboxes.map(function(text){ 
     return (<CheckBox displayText={text} onNewTick={this.handleCheckBoxChange}/>); 
    },this); 
    let radioButtonItems = radiobuttons.map(function(text){ 
     return (<RadioButton displayText={text} value={text.toLowerCase()} />); 
    }); 

    return (
     <div className="span3" > 
      <div className="well sidebar-nav custom-hero"> 
       <ul className="nav nav-list"> 
        <li className="nav-header">Type</li> 
        <CheckBoxGroup defaultValues={defaults} updateCount={this.getAirportDetails} /> 
        <li className="nav-header">Sort By</li> 
        {radioButtonItems} 
       </ul> 
      </div> 
      <div className="alert alert-success" role="alert">Total Airports <span className="badge">{this.state.total_count}</span></div>; 
     </div> 
    ); 

} 

}）;

Answer 1

componentDidUpdateは、afの実行をトリガーします。あなたのpropsとの合意が成立しました。この関数は、SideBarコンポーネント内でsetStateを実行し、したがって、すべての子コンポーネントも更新します。つまり、>componentDidUpdateがCheckBoxGroupで再びトリガーされます。これによりループが発生します。

より良い解決策は、handleCheckBoxChangeハンドラで発生させることです。