React Infinite Scroll - Intersection Observer API 总是跳回顶部

Question

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

到目前为止，这是我在 React 中使用 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 语句引起的。删除它可以解决问题，无限滚动就像一个魅力。

React Infinite Scroll - Intersection Observer API 总是跳回顶部

React Infinite Scroll - Intersection Observer API always jumping back to top

javascript

reactjs

intersection-observer