reactjs - ReactJS函数没有获得最新状态

我正在尝试ReactJS，但是在将其合并到表单中时遇到了困难。我正在ReactJS中建立一个自动建议的表单。在onChangeQuery中，设置状态，然后调用AJAX函数以从服务器端代码中获取建议。但是，我注意到loadGroupsFromServer函数未获取最新状态...这是一个按键 Action 太慢。我知道setState不是瞬时的，但是为什么我会在表单中使用setState？使用裁判更好吗？更好地只是从e.target.value获取值？

救命!

  var GroupForm = React.createClass({
    getInitialState: function() {
      return {query: "", groups: []}
    },
    componentDidMount: function () {
      this.loadGroupsFromServer();
    },
    loadGroupsFromServer: function () {
      $.ajax({
        type: "GET",
        url: this.props.url,
        data: {q: this.state.query},
        dataType: 'json',
        success: function (groups) {
          this.setState({groups: groups});
        }.bind(this),
        error: function (xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    onChangeQuery: function(e) {
      this.setState({query: e.target.value})
      this.loadGroupsFromServer();
    },
    render: function() {
      return (
        <div>
          <form class="form form-horizontal">
            <div class="col-lg-12">
              <input type="text" className="form-control" value={this.state.query} placeholder="Search for groups" onChange={this.onChangeQuery} />
            </div>
          </form>
          <GroupList groups={this.state.groups} />
        </div>
      )
    }
  })

最佳答案

setState进行回调，使您可以确保仅在更新this.loadGroupsFromQuery()之后才调用this.state。

this.setState({...}, function() {
  this.loadGroupsFromQuery();
});

关于reactjs - ReactJS函数没有获得最新状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27176838/