React.js 无限滚动列表无限重复

Question

您好，我是 React.js 的初学者，目前遇到有关无限列表的问题。当用户在页面底部滚动并且加载更多文档时（本例中的限制 = 10），将调用 loadMoreDocuments。例如，如果加载了 2 个新文档，因为不再存在。我想将偏移量设置为 9（初始加载 = 7 + 2 个新文档），然后新文档的加载应该完成。但在我的例子中，由于偏移量设置不正确，相同的 2 个文档被加载了无限的时间。

`// Documents loading
    const scrollContainerRef = useRef<HTMLDivElement>(null);
    const [documents, setDocuments] = useState<Document[]>([]);
    const initialLoadCount = 7;
    const [offset, setOffset] = useState(initialLoadCount);
    const limit = 7;
    const [isLoading, setIsLoading] = useState(false);

    const loadMoreDocuments = async () => {
        if (isLoading) {
            return;
        }
        setIsLoading(true);
        try {
            if (token) {
                const newDocuments = await getDocuments(offset, limit, token);
                setDocuments(prevDocs => [...prevDocs, ...newDocuments]);
                const newOffset = offset + newDocuments.length;
                setOffset(newOffset);
            }
        } catch (error) {
            console.error('Failed to fetch more documents:', error);
        }
        setIsLoading(false);
    };

    const handleScroll = () => {
        if (scrollContainerRef.current) {
            const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
            if (scrollTop + clientHeight >= scrollHeight - 10) {
                loadMoreDocuments();
            }
        }
    };

    useEffect(() => {
        if (scrollContainerRef.current) {
            scrollContainerRef.current.addEventListener('scroll', handleScroll);
        }
        return () => {
            if (scrollContainerRef.current) {
                scrollContainerRef.current.removeEventListener('scroll', handleScroll);
            }
        };
    }, []);`

设置偏移量的不同方法。 使用 isLoading 和 hasMoreToLoad 状态。

Answer 1

“滚动”事件处理函数正在运行，每次“滚动”事件被触发时，

从内部

loadMoreDoculents使用空依赖数组

调用

useEffect，因此这些函数将无法访问

offset

状态值实时。

话虽这么说，一个明显的解决方案是将

offset

包含在

useEffect

的依赖数组中，这将使事件处理函数始终使用最新版本的

handleScroll

和

loadMoreDoculents

函数，因此，最新值

offset

，每次

offset

更新。

考虑将这两个函数移入内部

useEffect