React関数は2回呼び出されたときの状態を更新します

Question

入力を使用してリストの項目数を更新しようとしています。今すぐコードが入力値を正しく更新していますが、OnBlurイベントを2回呼び出すと、リストを生成するために使用している配列が更新されています。私はどこに失敗しているのか分かりません。私はOnChangeイベントを使いましたが、問題は同じです。更新ロジックを処理 機能がUpdateList

は、相続人jsBinはhttp://jsbin.com/favabamitu/edit?html,js,console,output

を働いているここに私のコードです：

var InputData = React.createClass({ 
 
    getInitialState: function() { 
 

 
    return({ 
 
     number_of_locations: 4, 
 
     thickness_m: [] 
 
    }); 
 

 
    }, 
 

 
    componentDidMount: function() { 
 
    for (var i = 0; i < this.state.number_of_locations; i++) { 
 
     this.state.thickness_m.push(0); 
 
     console.log("state has been intitialized"); 
 
    } 
 
    }, 
 

 
    UpdateList: function(event) { 
 

 
    var value = event.target.value; 
 

 
    var locations = parseInt(this.state.number_of_locations); 
 
    console.log("local locations value is "+ locations); 
 
    var thickness = this.state.thickness_m; 
 

 
    if (locations > thickness.length) { 
 

 
     var dif = locations - thickness.length; 
 
     for (var i = 0; i < dif; i++) { 
 
     thickness.push(0); 
 
     } 
 
     console.log('up with' + dif + 'dif'); 
 

 
    } else if (locations < thickness.length) { 
 

 
     var dif = thickness.length - locations; 
 
     thickness.splice(0, dif); 
 
     console.log('down with' + dif + 'dif'); 
 

 
    } 
 

 
    this.setState({ 
 
     number_of_locations: value, 
 
     thickness_m: thickness 
 
    }); 
 
    }, 
 

 
    Lister: function(number, index) { 
 
    return (
 
     <li key = {index}> {number}</li> 
 
    ); 
 
    }, 
 

 
    render: function() { 
 
    var thickness_values = this.state.thickness_m 
 

 
    return (
 
     <div className="row"> 
 
      <div className="col-md-6"> 
 
       <div className="component"> 
 
        <div className="form-group"> 
 
         <label htmlFor="read-method">Reading Method</label> 
 
         <select className="form-control" name="read-method" id="read-method" required> 
 
          <option value="--">--</option> 
 
          <option value="1">Point Thickness Readings - PTR</option> 
 
          <option value="2">Critical Thickness Profiles - CTP</option> 
 
         </select> 
 
        </div> 
 
        <div className="form-group"> 
 
         <label htmlFor="number-of-locations">Number of Locations</label> 
 
         <input onBlur={this.UpdateList} 
 
          defaultValue={this.state.number_of_locations} 
 
          className="form-control" 
 
          type="number" 
 
          max="50" 
 
          min="1" 
 
          id="number-of-locations"/> 
 
        </div> 
 
        <div className="form-group"> 
 
         <label htmlFor="separation">Separation</label> 
 
         <input className="form-control" type="number" id="separation"/> 
 
        </div> 
 
        <div className="form-group"> 
 
         <ul> 
 
          {thickness_values.map(this.Lister)} 
 
         </ul> 
 
         <small>your list now has {this.state.number_of_locations} items</small> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div className="col-md-6"> 
 
       hello 
 
      </div> 
 
     </div> 
 
    ) 
 
    } 
 
}) 
 

 

 

 
ReactDOM.render(<InputData /> , 
 
    document.getElementById('input-measurement-data') 
 
);

<div id="input-measurement-data"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

任意の助けをいただければ幸いです！

Answer 1

変更この行：あなたは機能UpdateListの終わりにthis.state.number_of_locationsを更新するが、前に場所の数を計算しているので、それは、次のonChangeで更新され、あなたのコードの場合

var locations = parseInt(value); 

へ

var locations = parseInt(this.state.number_of_locations); 

をこのアップデート。すぐにthis.state変化させません）（

SETSTATEをが、保留状態遷移を作成します。

ところで、場所計算前にこの状態を更新するためthis React featureの、役に立ちません。このメソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。