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等）。目前，我正在加载两次相同的照片。你能帮我吗？

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

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

1 个答案: