javascript - React Function 在调用 Twice 时更新状态

Question

我正在尝试使用输入来更新列表的项目数。现在我的代码正在正确更新输入值，但是我用来生成列表的数组只有在我两次调用 OnBlur 事件时才会更新。我不知道我哪里失败了。我使用了 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

改变这一行:

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

到

var locations = parseInt(value);

对于您的代码，它会在下一个 onChange 中更新，因为您正在函数 UpdateList 的末尾更新 this.state.number_of_locations 但在此更新之前计算位置数.

顺便说一句，由于 this React feature，在位置计算之前更新此状态无济于事:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.