React无限滚动-交叉点观察者API总是跳回到顶部

Question

我正在使用Intersection Observer API开发具有无限滚动的React应用程序(不使用任何第三个库进行无限滚动(。我的后端正确地处理分页，当达到阈值时，无限滚动也会获取下一部分。问题是，每次我向下滚动并达到阈值时，窗口都会滚动回顶部，这不是我所期望的。似乎不仅要渲染新项目，还要渲染整个项目列表。

以下是迄今为止我在React with Redux中实现它的方式：

import React, {useEffect, useRef, useCallback} from "react";
import Spinner from "../../UI/Spinner";
import {withRouter} from "react-router-dom";
import {connect} from "react-redux";
import * as actions from "../../store/actions/index";
const List = props => {
const {items, next, loading, loadMoreData} = props;
const loader = useRef(null);
const loadMore = useCallback((entries) => {
const target = entries[0];
if (target.isIntersecting && next) {
!loading && loadMoreData(next);
}
}, [loading, next, loadMoreData]);
useEffect(() => {
const options = {
threshold: 1.0
};
// Observer API 
const observer = new IntersectionObserver(loadMore, options);
const currentLoader = loader.current;
if (loader && currentLoader) {
observer.observe(currentLoader);
}
return () => observer.unobserve(loader.current);
}, [loader, loadMore]);
const content = <Spinner/>;
if (!loading) {
content = items.map((item, index) => return (<div key={index}>{item}</div>))
}
return (
<div>
{content}
<div ref={loader}></div>
</div>
)
}
const mapStateToProps = state => {
return {
items: state.items.items,
next: state.items.next,
loading: state.items.loading,
error: state.items.error
};
};
const mapDispatchToProps = dispatch => {
return {
fetchMoreData: (next) => dispatch(actions.fetchDataStart(next)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(List));

因此，总结问题如下：

向下滚动屏幕并达到设置的阈值后，数据被成功提取并添加到我的redux存储中。但整个列表会再次呈现在页面顶部，我必须再次向下滚动。有什么办法解决这个问题吗？

Answer 1

此主题可以关闭。这是一个小而愚蠢的错误。整个列表的重新呈现是由if语句引起的，我在该语句中填充内容变量。删除这个解决了这个问题，无限卷轴就像一个魅力。