反应：应用程序多次请求相同的端点答案

【问题标题】：React: App requests same endpoint multiple times反应：应用程序多次请求相同的端点
【发布时间】：2019-11-30 18:17:05
【问题描述】：

我正在使用Infinite scroll component。它正在工作，但它多次请求相同的端点（3 -4 次）。以我的 React 知识，让我解释一下发生了什么：

因为我设置了initialLoad={true}，所以loadMore函数会在组件渲染后立即被调用。我可以设置 initialLoad={false} 但它不会在初始渲染中获取数据

在第一次渲染中，它调用 loadMore 函数 ==> 正在加载 状态改变 ==> 第二次渲染
在第二次渲染中，它调用 loadMore 函数 ==> tracks 状态改变 ==> 第三次渲染
在第三次渲染中，它调用 loadMore 函数 ==> 某些状态发生了变化 ==> 第四次渲染

Index.js

export default function index() {
  const { tracks, error, loading, loadMore, hasMore } = usePublicTracks(
    myApiEndPoint.TRENDING_TRACKS,
    5,
  );

  return (
    <div>
      <Main>
        <InfiniteScroll
          initialLoad={true}  //call loadMore function right after component rendered
          pageStart={0}
          loadMore={loadMore}
          hasMore={hasMore}
        >
          <TrackList>
            {tracks.map((track, i) => (
              <TrackItem key={i}
                track={track}
              />
            ))}
          </TrackList>
          {loading && hasMore && (
            <div className="">
              <Spin />
            </div>
          )}
        </InfiniteScroll>
      </Main>
    </div>
  );
}

使用PublicTracks.js

export const usePublicTracks = (endpoint, limit) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [offset, setOffset] = useState('');
  const [tracks, setTracks] = useState([])
  const [hasMore, setHasMore] = useState(true);

  console.log('tracks', tracks)
  const loadMore = async params => {
    try {
      console.log('hello22222222222222222222222222222222222222222')
      const res = await myApiAxiosInstance.get(endpoint, {
        params: {
          limit: limit,
          lastVisible: offset
        }
      });
      setLoading(false);
      setTracks([...tracks, ...(res.data.collection)])
      setOffset(res.data.lastVisible)
      if (res.data.lastVisible == "end") setHasMore(false);

    } catch (error) {
      setLoading(false);
      setError(error.message);
    }
  };



  return {
    error,
    loading,
    tracks,
    loadMore,
    hasMore
  };
};

当我在useEffect中包装loadMore func时，它显示错误Hooks can only be called inside of a function component.：

const loadMore = async params => {
    useEffect(() => {
      const loadMoreOnce = async () => {
        //some logic
      };
      loadMoreOnce();
    }, []);
  };

我的问题是如何调用一次加载更多功能。然后每次滚动到窗口底部时调用它？如何防止多次请求同一个端点？

【问题讨论】：

你试过使用useEffect吗？您应该将初始调用包装在 useEffect 函数中。

标签： javascript reactjs react-hooks infinite-scroll

【解决方案1】：

const isLoading = false;
const myComponent = () => {
  useEffect(() => {
    loadMore(); // initial call, this useEffect equivalent to componentDidMount
  }, []);

  if (!isLoading && document.body.scrollTop >= document.body.offsetTop) { 
    console.log('loading, should see this once');
    isLoading = true;
    loadMore(); // here, after loadMore finished you need to resolve isLoading to false
  }
  return (<div>My component</div>);
}

尝试查找所有的loadMore函数调用，可能在其他地方也有调用，从页面开始更改偏移量，检查hasMore条件是否正确，因为几个调用也可能来自InfiniteScroll本身，当它认为你触底了好几次。

【讨论】：