如何修复这个带有缓存 BUG 的 React.js 无限滚动？

Question

我想在 React 中创建一个无限滚动部分，并缓存数据。 问题是，即使我没有滚动到列表底部并且正在破坏应用程序，该组件也在一个接一个地发出请求。 我不知道问题出在哪里，所以我添加了所有这些文件。

这是文件：-> 我使用组件的文件：

<InfiniteScrollWrapper url={`${url.urlWeb}/${storeId}`}>
  {(res) =>
    res?.map((item) => {
      return <InventoryItem
        openImage={(img) => {
          openImage(img);
        }}
        key={item._id}
        item={item}
      />
    })
  }
</InfiniteScrollWrapper>

这是无限滚动组件：

import { RootRef } from '@material-ui/core';
import React, { useEffect, useState } from 'react';
import useInfiniteScroll from 'react-infinite-scroll-hook';

import LoadingIndicator from './loadingIndicator';
import useCachedState from './useCachedState';

const InfiniteScrollWrapper = ({ children, url, defaultValue }) => {
  const [page, setPage] = useState(1);
  const scrollToTop = window.scrollTo(0, 0);

  console.log('loaded more cica inital....')
  const [data, setData] = useCachedState(`${url}?page=${page}`, defaultValue)
  const [isLoading, setIsLoading] = useState(true);

  function handleLoadMore() {
    setIsLoading(true);
    setData(`${url}?page=${page + 1}`, []);
    setPage(page + 1);
  }

  const infiniteContainerRef = useInfiniteScroll({
    hasNextPage: true,
    loading: isLoading,
    onLoadMore: handleLoadMore,
  });

  useEffect(() => {
    setIsLoading(false);
  }, [data]);

  return (
    <RootRef rootRef={infiniteContainerRef}>
      <>
        {children(data)}
        {isLoading && <LoadingIndicator noMargin={true} size="small" />}
      </>
    </RootRef>
  );
};

export default InfiniteScrollWrapper;

和缓存文件：

import axios from 'axios';
import { useEffect, useState } from 'react';
const CACHE = {};

const useCachedState = (url, defaultValue = []) => {
  const [data, setData] = useState(defaultValue);
  const [isLoading, setLoading] = useState(true);
  const laodMoreData = async () => {
    const cacheID = url;
    if (CACHE[cacheID] !== undefined) {
      setData(CACHE[cacheID]);
    }

    axios.get(url).then((newData) => {
      CACHE[cacheID] = newData.data.inventory;
      setData(newData.data.inventory);
      console.log('new loaded data in the cache', newData.data.inventory)
      setLoading(false);
    });
  }

  useEffect(() => {
    // cacheID is how a cache is identified against a unique request
    const cacheID = url;
    // look in cache and set response if present
    if (CACHE[cacheID] !== undefined) {
      setData(CACHE[cacheID]);
      setLoading(false);
    } else {
      // else make sure loading set to true
      setLoading(true);
    }
    // fetch new data
    axios.get(url).then((newData) => {
      console.log('new Data', newData.data.data.inventory)
      CACHE[cacheID] = newData.data.data.inventory;
      setData(newData.data.data.inventory);
      setLoading(false);
    });
  }, [url]);

  return [data, laodMoreData];
};

export default useCachedState;