react.js - 为什么setState无效?关于react的一个问题,比较有趣的一个问题
本文介绍了react.js - 为什么setState无效?关于react的一个问题,比较有趣的一个问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
onRefresh=() => {
this.setState({page: 1 });
console.log(this.state.page);// <1>处
this.fetchPostsData();
}
fetchPostsData=() => {
const {
url,
} = this.props;
const {
page,
postListData,
} = this.state;
console.log(this.state.page);// <2>处
this.setState({
refreshing: true,
});
httpGet(`${baseUrl + url}&offset=${(page - 1) * 10}`)
.then(result => this.setState({
refreshing: false,
postListData: postListData.concat(result),
page: page + 1,
}), error => {
this.setState({
refreshing: false,
});
alert(error);
});
}
用react-native
写的,应该跟react
的写法差不多吧
主要的两个函数如上,关键是state
中的page
的取值问题,onRefresh
函数执行的时候,会先将state
中的page
设为1,然后再取出state
中的page
的指,接着请求数据,请求完了将state
中的page + 1
。这个是我所期待的。
大家可以看到注释<1>和<2>处我都将state
中的page
都打印出来了。当我不断地执行onRefresh
函数的时候,发现<1>和<2>两个地方打印的page是不断+1
的,感觉就是setstate
把page
设为1这一步被跳过了,page
的值一直加下去了。
导致这个现象的发生的原因是什么?
有什么解决方法吗?
感觉这个跟setState
的机制有关。
欢迎高手来答!
解决方案
setState
是不保证同步的,也就是说,setState
有的时候并不会立即更新state
中的值。
所以在setState
之后,立马从this.state
中可能拿到的是更新前的值。
根据你的代码,可以这么搞:
onRefresh=() => {
this.setState({page: 1 });
console.log(this.state.page);// <1>处
this.fetchPostsData(1);
}
fetchPostsData=(page=this.state.page) => {
const {
url,
} = this.props;
const {
postListData,
} = this.state;
console.log(page);// <2>处
this.setState({
refreshing: true,
});
httpGet(`${baseUrl + url}&offset=${(page - 1) * 10}`)
.then(result => this.setState({
refreshing: false,
postListData: postListData.concat(result),
page: page + 1,
}), error => {
this.setState({
refreshing: false,
});
alert(error);
});
}
这篇关于react.js - 为什么setState无效?关于react的一个问题,比较有趣的一个问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文