ReactJS函数未获取最新状态
ReactJS函数未获取最新状态
提问于 2014-11-28 02:18:26
我正在尝试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
Stack Overflow用户
发布于 2014-11-28 05:26:13
setState会进行回调，确保只有在更新this.state之后才会调用this.loadGroupsFromQuery()。
this.setState({...}, function() {
this.loadGroupsFromQuery();
});Stack Overflow用户
发布于 2014-11-28 03:15:17
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);
}
}Stack Overflow用户
发布于 2015-02-08 02:46:14
一个字符关闭问题的根本原因是您在设置状态之前正在读取状态。setState很快，但它不是即时和同步的。前面的答案为您提供了几种重构方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27176838
复制相关文章
相似问题
腾讯云开发者
