反应：为什么状态要正确更新到第二次？

Question

I'm fetching data (pics and descriptions) from server, and using them in infinite scroll. When I'm scroll to bottom of page I want to change state value (value of the page from which we collect data).

When I'm doing this, something goes wrong. State update correctly only on second and each next time.

Code:

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

and now, the problem is here:

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

on the first function call, page is 1, but on my logic should be 2. On the next calls everything work good (page is 2, 3, 4 etc.). For now i'm loading two times the same photos. Can You help me?

Answer 1

As we know setState in react is asynchronous so you can't see the value immediately when modified.

To get the updated value you should do something like below

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