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屋！