代码之家 › 专栏 › 技术社区 › sosick

反应:为什么状态会正确更新到第二次?

reactjs javascript

sosick · 技术社区 · 6 年前

我正在从服务器获取数据(图片和描述),并使用它们无限滚动。当我滚动到页面底部时,我想更改状态值(我们从中收集数据的页面的值)。

当我这样做的时候,有些事情出错了。仅在第二次和下次正确更新状态。

代码:

class Gallery extends Component {
  state = {
    photos: [],
    searchValue: "dog",
    page: 1,
    totalPages: null
  };

  getPhotos = () => {
    const { photos, searchValue, page, totalPages } = this.state;

    axios.get(`api_key=${API_KEY}&tags=${searchValue}&page=${page}`)
      .then(res => {
        this.setState({
          photos: [...photos, ...res.data.photos.photo],
          totalPages: res.data.photos.pages
        });
        if (page < totalPages) {
          this.setState(prevState => ({ page: prevState.page + 1 }));
          console.log(page); // returns 1 on the first call, but should return 2;
        }
      })
  };

  render() {
    const { photos, page, totalPages, loading } = this.state;

    return (
      <div className={classes.Content}>
        <InfiniteScroll
          pageStart={page}
          loadMore={this.getPhotos}
          hasMore={page < totalPages}
          loader={<Spinner />}
        >
          <Photos photos={photos} />
        </InfiniteScroll>
      </div>
    );
  }
}

现在的问题是:

if (page < totalPages) {
    this.setState(prevState => ({ page: prevState.page + 1 }));
}

在第一个函数调用中,page是1,但在我的逻辑中应该是2。在接下来的通话中,一切正常(第2、3、4页等)。目前,我正在加载两倍相同的照片。你能帮助我吗?

1 回复 | 直到 6 年前

Hemadri Dasari 6 年前

如我们所知,react中的setstate是异步的,因此修改后您可以立即看到该值。

要获取更新的值,您应该执行如下操作

 getPhotos = () => {
      const { photos, searchValue, page, totalPages } = this.state;
    if (page < totalPages) {
          this.setState(prevState => ({ 
              page: prevState.page + 1 
          }), () => {
               console.log(this.state.page);//will print 2
             axios.get(`api_key=${API_KEY}&tags=${searchValue}&page=${this.state.page}`)
        .then(res => {
           this.setState({
              photos: [...photos, ...res.data.photos.photo],
              totalPages: res.data.photos.pages
          });
        })
      });
    }
  }

推荐文章