0

我在滚动一段时间后遇到砌体网格破裂的问题，就像在这个 GIF 中一样。Firefox 完美运行。

动图

这是带有示例的代码框。

https://codesandbox.io/s/musing-nash-y337c?file=/src/App.js

数据来自使用 React-Query 的 reddit API。

const queryPosts = async (key, nextId = "") => {
const { data } = await Axios.get(
  `https://www.reddit.com/r/earthporn/hot.json?
  &after=` + nextId
);

return {
  data: data,
  nextId: data.data.after
  };
};


//GET DATA

const {
  status,
  data,
  error,
  isFetching,
  isFetchingMore,
  fetchMore,
  canFetchMore,
  isLoading
  } = useInfiniteQuery("infinite-posts", queryPosts, {
  getFetchMore: ({ data, nextId }) => {
    return nextId;
  }
});

获取后，我检查帖子类型（图像或文本帖子），然后根据帖子类型呈现。加载图像或文本后，我会根据图像或元文本高度自动设置跨度。我根据图像高度自动设置跨度。

const hasImage = () => {
 if (post.preview) {
  return true;
 } else {
  return false;
 }
}; 

useEffect(() => {
//IF post has image, set grid spans according to image height and meta text height, if not, just take height of meta and render.
if (hasImage()) {
  //This allows browser to get image height after it is loaded. It displayed as "0" before that,       because it tried to get data when the image was not loaded.
  //We need to wait for image to load, then set spans.
  imageRef?.current?.addEventListener("load", () => {
    setSpans(
      Math.ceil(
        (imageRef?.current?.clientHeight + metaRef?.current?.clientHeight) /
          10 +
          1
      )
    );
  });

} else {
  //We don't need to wait for text to load, so just set spans.
  setSpans(Math.ceil(metaRef?.current?.clientHeight / 10 + 1));
}
}, [imageRef, metaRef]);

它在 Firefox 上按预期工作，但其他人在滚动一段时间后会中断。当我使用外部包时，滚动不会出错，但我对它的外观不满意。

帮助 ：（

4

0 回答 0