Heroku React App 行为不同：笔记本电脑与台式机

Question

我有一个简单的 MERN 堆栈应用程序，它显示来自 Cloudinary 的图像。 例如，搜索“鞋子”将显示我的 Cloudinary 数据库中带有“鞋子”标签的所有图像。

要加载更多图像，我有一个 window 事件，当滚动条位于浏览器 window 底部时，该事件将激活我的“loadMore”function。 function 在我的 Mac 桌面上完美运行，但是当我从笔记本电脑访问该站点时，它会加载重复的图像。 我记录了滚动事件，它们在两个设备上都运行良好。 我只是不确定为什么这两种设备的行为不同。

---

滚动事件：

  var totalPageHeight = document.body.scrollHeight; 

    // @var int scrollPoint
    var scrollPoint = window.scrollY + window.innerHeight;

    // check if we hit the bottom of the page
    if(scrollPoint >= totalPageHeight)
    {
        if(nextCursor){
          handleLoadMoreButtonClick()
        }
    }
}

加载更多图片事件：

  console.log(`Prior to loading more images, next cursor is :  ${nextCursor}`)
  if(nextCursor){
    console.log("LOADING MORE IMAGES!!!!!!")
    const responseJson = await searchImages(query, nextCursor);
    setImageList((currentImageList) => [
      ...currentImageList,
      ...responseJson.resources,
    ]);
    setNextCursor(responseJson.next_cursor);
    setNumImage(imageList.length+responseJson.resources.length)
  }
  
};

我已经检查以确保滚动事件 function 正在工作，并且它可以正确检测滚动条何时到达页面底部。 出于某种奇怪的原因，当我在笔记本电脑上访问该站点时，它只会加载原始图像的许多副本，即使 nextCursor 等变量是正确的。

Answer 1

If the scroll function is fired multiple times, you can use a local variable isScrollEventFired = false , set it to true inside your scroll function & set it to false again when state is updated and return if isScrollEventFired is true inside your scroll function