为什么setState无效？关于react的一个问题，比较有趣的一个问题

Question

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的机制有关。

欢迎高手来答！

Answer 1

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

Answer 2

setState并不是同步的，你在后面取值是取不到的。为此，官方为setState提供了一个回调函数。

setState(updater, [callback])

你可以试着将fetchPostsData 放在回调函数中执行，应该就能获得你想要的效果了。更详细信息可以点击这里