0

我目前正在构建一个加载视频并用缩略图显示它们的工具。到达可滚动视图的末尾后，我希望获取接下来的 40 个项目并将其添加到现有数组中。我为此使用了Grommet 的 InfiniteScroll。以下是代码的重要部分：

const [loadedVideos, setLoadedVideos] = useState([]);
const [loadedDetails, setLoadedDetails] = useState(false);
const [offset_start, setOffset] = useState(0);

useEffect(() => {
  // for inital load & different media types
  fetch(
    `url/?token=xyz&offset_start=${offset_start}&per_page=80&record_type=${selectedType}`
  )
    .then((response) => response.json())

    .then((data) => {
      console.log('Offset: ', offset_start);

      setLoadedVideos(data.response.results.records); // puts the videos in the array --> this should be extended with the change of offset_start

      setIsLoading(false);
    })
    .catch((error) => console.log(error));
}, [offset_start, selectedType]);

<InfiniteScroll
  items={loadedVideos}
  step='20'
  onMore={() => {
    setOffset(offset_start + 40);
  }}
>
  {(item) => (
    <Videocard
      key={`${item.record_id}`}
      sendData={gotDetails}
      thumbnail={`${item.thumbnail.url}`}
      title={`${item.title}`}
      databox={`${item.databox_id}`}
      video={item}
    />
  )}
</InfiniteScroll>;
4

1 回答 1

1 
setLoadedVideos(currentLoadedVideos => [...currentLoadedVideos, ...data.response.results.records])
于 2022-02-15T17:42:59.397 回答