React组件渲染多次

Question

我有一个简单的react结构，随着该结构向下滚动，它会加载更多项目：

request

然后这样映射我的数据：

function handleScroll() {
    if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight || isFetching) return;

        setIsFetching(true);
}

useEffect(() => {
    if (!isFetching) return;
    fetchMoreListItems();
}, [isFetching]);



const fetchMoreListItems = () => {
    getData(state.page, Config.ADS_PER_ROW, dispatch, state.sortBy, false)
    setTimeout(() => {
        setIsFetching(false);
    }, 1000);
}

但是，每次我向下滚动state.data.map((r, i) => { return ( <tbody key={r.id}> {!state.loading && i && i % 20 === 0 ? <AddRender /> : null} 时至少运行5次，这给我带来了很多问题。

如何避免在没有命令的情况下多次运行此组件？