AlexP

Всем привет!

Помогите разобраться в задаче:
Есть главный большой массив с данными, его нужно постепенно выводить пользователю при скроллинге страницы.

Мое решение заключается в том, чтобы из большого массива отбирать по частям данные и добавлять их в дополнительный массив, который записан в state и показывается пользователю.

Проблема:
Не могу сохранить данные в дополнительном массиве в момент добавления новых

import { useEffect, useState, useContext } from 'react'
import { Link } from 'react-router-dom'
import { IconArray } from '@services/context'

const ICONS_PER_PAGE = 5

const IconsList = () => {
    const { iconArray, setIconArray } = useContext(IconArray)

    const [triggerToLoad, setTriggerToLoad] = useState(true)
    const [iconArrayLazy, setIconArrayLazy] = useState([])

    const scrollHandler = (e) => {
        let scrollGalleryValue = document.querySelector('.list__container').getBoundingClientRect().y + document.querySelector('.list__container').clientHeight - window.innerHeight
        if (scrollGalleryValue <= 0 ) {
            setTriggerToLoad(!triggerToLoad)
            console.log(iconArrayLazy); // ? Тут дополнительный массив всегда пустой, как сохранять предыдущие данные?
        }
    }

    useEffect(() => {
        // ? добавляем следующие порции, когда срабатывает триггер
        setIconArrayLazy(iconArrayLazy => [...iconArrayLazy, ...iconArray.slice(iconArrayLazy.length, iconArrayLazy.length + ICONS_PER_PAGE)])
    }, [triggerToLoad])

    useEffect(() => {
        // ? добавляем первую порцию данных от 0 до ICONS_PER_PAGE
        setIconArrayLazy(iconArrayLazy => [...iconArrayLazy, ...iconArray.slice(iconArrayLazy.length, iconArrayLazy.length + ICONS_PER_PAGE)])
        document.addEventListener('scroll', scrollHandler)
        return function () {
            document.removeEventListener('scroll', scrollHandler)
        }
    }, [])

    return (
        <>
            <ul className="list__container">

                {iconArrayLazy.map(({id, title, img}) =>

                    <li className="icon_container" key={id}>
                        <Link to={`/icon-${id}`}>
                            <img className="icon_container__image" src={img} alt={title} />
                        </Link>
                    </li>
                )}

            </ul>
        </>
    )
}

export default IconsList