ReactJS 函数没有获得最新状态

IT技术 reactjs
2021-05-06 02:19:52

我正在尝试 ReactJS，但在将其合并到我的表单中时遇到了困难。我正在 ReactJS 中构建一个自动建议表单。在我的 中onChangeQuery，我正在设置状态，然后调用 AJAX 函数以从我的服务器端代码中获取建议；但是，我注意到该 loadGroupsFromServer功能没有获得最新状态......这是一个按键太慢了。我知道setState不是即时的，但是我为什么要setState用于我的表单？使用 refs 更好吗？最好从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>
      )
    }
  })
4个回答

setState接受一个回调，它允许您确保this.loadGroupsFromQuery()仅在this.state更新后调用。

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

setState 最佳实践

ES5

this.setState(function(state, props){
   return {
      query: e.target.value
   }
}, function()=>{
   //after callback 
});

ES6

 this.setState((state, props) => ({
    query: e.target.value
 }), ()=>{
   //after callback 
 });

loadGroupsFromServer 应该采用查询参数。

componentDidMount: function () {
  this.loadGroupsFromServer(this.state.query);
},
loadGroupsFromServer: function (query) {
  $.ajax({
    /* ... */
    data: {q: query},
    /* ... */
  });
},
onChangeQuery: function(e) {
  this.setState({query: e.target.value})
  this.loadGroupsFromServer(e.target.value);
},

您通常应该尝试减少对状态的访问，因为它为您提供了更大的灵活性。

根据情况，您可能希望在执行某些操作之前等待组件更新：

onChangeQuery: function(e) {
  this.setState({query: e.target.value}, function(){
      this.loadGroupsFromServer(this.state.query)
  }.bind(this));
},

或者你可以像这样重写它，在我看来这更清晰。

onChangeQuery: function(e) {
  this.setState({query: e.target.value});
},
componentWillUpdate: function(nextProps, nextState){
  // optionally perform better heuristics, but this prevents them pressing space
  // from triggering an update
  if (nextState.query.trim() !== this.state.query.trim()) {
      this.loadGroupsFromServer(nextState.query);
  }
}

您的单字符关闭问题的根本原因是您在设置之前正在读取状态。setState 很快，但它不是即时和同步的。前面的答案为您提供了几种重构方法。

其它你可能感兴趣的问题
上一篇使用 recharts ( Barchart ) 设置响应式图表的高度和宽度 下一篇如何准确打印带孔图案的薄片