ReactJS函数是'；我没有得到最新的状态

我正在尝试ReactJS，但在将其整合到表单中时遇到了困难。我正在ReactJS中构建一个自动建议表单。在我的

onChangeQuery

中，我设置状态，然后调用AJAX函数从服务器端代码中获取建议；然而，我注意到

loadGroupsFromServer

函数未获取最新状态。。。一键击球太慢了。我知道

setState

不是即时的，但我为什么要在表单中使用

setState

？使用refs更好吗？最好只从

e.target.value

中获取值

救命啊

var GroupForm=React.createClass({
getInitialState:函数（）{
返回{查询：“”，组：[]}
},
componentDidMount:函数（）{
this.loadGroupsFromServer（）；
},
loadGroupsFromServer:函数（）{
$.ajax({
键入：“获取”，
url:this.props.url，
数据：{q:this.state.query}，
数据类型：“json”，
成功：功能（组）{
this.setState（{groups:groups}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
onChangeQuery:函数（e）{
this.setState（{query:e.target.value}）
this.loadGroupsFromServer（）；
},
render:function（）{
返回(
)
}
})

loadGroupsFromServer应采用查询参数

componentDidMount:function（）{
this.loadGroupsFromServer（this.state.query）；
},
loadGroupsFromServer:函数（查询）{
$.ajax({
/* ... */
数据：{q:query}，
/* ... */
});
},
onChangeQuery:函数（e）{
this.setState（{query:e.target.value}）
this.loadGroupsFromServer（e.target.value）；
},

您通常应该尝试减少对状态的访问，因为它给您带来了更多的灵活性

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

onChangeQuery:函数（e）{
this.setState（{query:e.target.value}，function（））{
this.loadGroupsFromServer（this.state.query）
}.约束（这个）；
},

或者你可以像这样重写，在我看来更干净

onChangeQuery:函数（e）{
this.setState（{query:e.target.value}）；
},
componentWillUpdate:函数（nextProps，nextState）{
//可以选择执行更好的启发式，但这可以防止它们占用空间
//从触发更新
if（nextState.query.trim（）！==this.state.query.trim（））{
this.loadGroupsFromServer（nextState.query）；
}
}

设置状态

接受一个回调，该回调允许您确保

此.loadGroupsFromQuery（）

仅在更新

此.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 
 });

---

setState并不慢，但它是异步的。所以根据上面的答案，无论你的状态是什么，它都会同步工作

---

根据最佳实践，状态应设置在渲染方法的外部

如果你自己调用setState，你不应该期望立即更新这个.state。我也这么做了，但仍然没有达到预期。它太慢了。有没有其他的黑客来改进它？@DEEPANKUMAR什么是慢的，你还记得调用回调是慢的还是

loadGroupsFromQuery

调用是慢的吗？关于loadGroupsFromQuery（）函数，只需执行console.log（）或任何其他简单的函数来检查状态更新速度。本地状态更新持续时间太长。

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