Ломается infinite scroll

Question

Ломается infinite scroll

- Ученик (108), открыт 3 недели назад

Здравствуйте, ломается приложение при скролек прикол в том что хочу реализовать подгрузку что бы изначально было 6 процентов потом по 2 подгружались при скролле но сервер возвращает продукты только целым массивом поэтому пожалуйста если это плохой вариант то подскажи как лучше реализовать что бы оптимизировать приложение, может сделать запросы каждый раз

 function Homepage() { 
  const [slide, setSlide] = useState(0); 
  const wallet = useTonWallet(); 
  const { open } = useTonConnectModal(); 
  const productsList = useSelector((state) => state.products.productsList); 
  const [products, setProducts] = useState([]); 
  const [loading, setLoading] = useState(false); 
  const [displayedProducts, setDisplayedProducts] = useState([]); 
  const [displayCount, setDisplayCount] = useState(6); 
   
  useEffect(() => { 
    fetchProducts(); 
  }, []); 
   
  const fetchProducts = async () => { 
    axios.post(путь) 
    .then(res => { 
      setProducts(res.data); 
      setDisplayedProducts(res.data.slice(0, displayCount)); 
    }) 
    .catch(error => { 
      console.error('Error fetching products:', error); 
    }); 
  }; 
   
  const handleScroll = () => { 
    const scrollHeight = document.body.scrollHeight; 
    const scrollTop = document.body.scrollTop; 
    const clientHeight = document.body.clientHeight; 
   
    if (scrollTop + clientHeight >= scrollHeight) { 
    setLoading(true); 
    setTimeout(() => { 
      setDisplayCount(displayCount + 2); 
      setDisplayedProducts(products.slice(0, displayCount + 2)); 
      setLoading(false); 
    }, 1000); 
    } 
  }; 
   
  window.addEventListener('scroll', handleScroll); 
 
  return ( 
       
        {displayedProducts.map((product) => ( 
         
        ))} 
        {loading && Loading...
}

Answer 1

 import React, { useState, useEffect, useCallback } from 'react'; 
import axios from 'axios'; 
import { useSelector } from 'react-redux'; 
import { useTonWallet, useTonConnectModal } from 'your-ton-wallet-hooks'; 
import ProductCard from './ProductCard'; // Предположим, что это компонент карточки продукта 
import styles from './Homepage.module.css'; // Предположим, что у вас есть CSS-модули 
 
function Homepage() {  
  const [slide, setSlide] = useState(0);  
  const wallet = useTonWallet();  
  const { open } = useTonConnectModal();  
  const productsList = useSelector((state) => state.products.productsList);  
  const [products, setProducts] = useState([]);  
  const [loading, setLoading] = useState(false);  
  const [displayedProducts, setDisplayedProducts] = useState([]);  
  const [displayCount, setDisplayCount] = useState(6);  
 
  useEffect(() => {  
    fetchProducts();  
  }, []);  
 
  const fetchProducts = async () => {  
    try { 
      const response = await axios.post('путь');  
      setProducts(response.data);  
      setDisplayedProducts(response.data.slice(0, displayCount));  
    } catch (error) { 
      console.error('Error fetching products:', error);  
    } 
  };  
 
  const handleScroll = useCallback(() => {  
    const scrollHeight = document.body.scrollHeight;  
    const scrollTop = document.documentElement.scrollTop;  
    const clientHeight = document.documentElement.clientHeight;  
 
    if (scrollTop + clientHeight >= scrollHeight - 5) {  
      setLoading(true);  
      setTimeout(() => {  
        const newDisplayCount = displayCount + 2; 
        setDisplayCount(newDisplayCount);  
        setDisplayedProducts(products.slice(0, newDisplayCount));  
        setLoading(false);  
      }, 1000);  
    }  
  }, [displayCount, products]);  
 
  useEffect(() => { 
    window.addEventListener('scroll', handleScroll); 
    return () => window.removeEventListener('scroll', handleScroll); 
  }, [handleScroll]); 
 
  return (  
      
      {displayedProducts.map((product, index) => (  
          
      ))}  
      {loading && Loading...
}  
      
  
    
  
  );  
} 
 
export default Homepage;

Answer 2

Нормальный бесконечный скроллинг - это когда сервер возвращает данные небольшими порциями. Доходим до конца страницы - делаем очередной AJAX-запрос к серверу, который возвращает очередную порцию отображаемых данных. А т.к. порции небольшие, происходит это быстро. Именно для ускорения отображения начальной порции данных бесконечный скроллинг и нужен.

Answer 3

Значит надо сделать так чтобы сервер возвращал контент порционно

Answer 4

У тебя логика кода работает так что ты каждый раз подгружаешь новый массив. В это строчке setDisplayedProducts(response.data.slice(0, displayCount)). Что бы подгружать порционно можно попробовать сделать так. не уверен что сработает потому что такой ерундой не приходилось заниматься. setDisplayedProducts(prev => [...prev, ...response.data.slice(prev.length, displayCount)]) Просто такая логика пагинации обынчо предусмотрена на бекенде а не на фронте...