javascript - React：为什么直到第二次才正确更新状态？

Question

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

当我这样做时，出现了问题。仅在第二次和下一次正确更新状态。

代码：

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

在第一个函数调用中，页面是 1，但我的逻辑应该是 2。在下一个调用中，一切正常（页面是 2、3、4 等）。现在我正在加载两次相同的照片。你能帮助我吗？

标签： javascriptreactjs

Answer 1

正如我们所知，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
          });
        })
      });
    }
  }