Значение немедленного возврата в обратном переговоре в реализации бесконечной прокрутки в React ⇐ Javascript

[Anonymous]

В следующем коде я понимаю, что если (загрузка) return; используется для предотвращения повторных вызовов для set-page , это то, что произойдет, если LastiTemRef разрешено создавать и прикрепить новый наблюдатель к уже включенному элементу. Тем не менее, единственная причина, по которой ссылка на обратный вызов (lastItemRef) в первую очередь вызывается, потому что его загрузка изменения зависимости (я знаю, что есть и есть , но он остается истиной , пока не будет больше). Теперь, если мы не поместили там зависимость нагрузки , в первую очередь тот же экземпляр рефера обратного вызова будет возвращен UseCallback , а обратный ссылки даже не запускается, так что нет шансов прикрепить нового наблюдателя к уже включенным элементам, поэтому мне кажется, что это просто создает проблему и решает ее, но не было проблем с началом: forms = . PrettyPrint-Override ">import { useState, useEffect, useRef, useCallback } from 'react';

const InfiniteScrollList = () => {
const [items, setItems] = useState([]);
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);
const observer = useRef();

// Fetch data function
const fetchItems = async (pageNum) => {
setLoading(true);
try {
// Replace with your actual API call
const response = await fetch(https://api.example.com/items?page=${pageNum});
const data = await response.json();

setItems(prev => [...prev, ...data.items]);
setHasMore(data.hasMore); // Assuming your API indicates if there's more data
} catch (error) {
console.error('Error fetching data:', error);
} finally {
setLoading(false);
}
};

// Intersection Observer callback
const lastItemRef = useCallback(node => {
if (loading) return;
if (observer.current) observer.current.disconnect();

observer.current = new IntersectionObserver(entries => {
if (entries[0].isIntersecting && hasMore) {
setPage(prev => prev + 1);
}
});

if (node) observer.current.observe(node);
}, [loading, hasMore]);

// Initial fetch and fetch when page changes
useEffect(() => {
fetchItems(page);
}, [page]);

return (

{items.map((item, index) => {
if (index === items.length - 1) {
return (

{item.name}

);
}
return (

{item.name}

);
})}
{loading && Loading more items...}
{!hasMore && No more items to load}

);
};

export default InfiniteScrollList;


Подробнее здесь: https://stackoverflow.com/questions/797 ... te-scrolli