Как я могу установить для свойства-заполнителя response-lazyload значение none, когда оно достигает конца массива? - PullRequest
Новая
       42

Как я могу установить для свойства-заполнителя response-lazyload значение none, когда оно достигает конца массива?

1 голос
/ 13 июля 2020

Я использую библиотеку response-lazyload для своего проекта js response. 

import LazyLoad from 'react-lazyload';

Сначала я получаю данные с помощью useEffect: 

const [ stuff, setStuff ] = React.useState(null);
    React.useEffect(() => {
        Axios.get('https://jsonplaceholder.typicode.com/posts')
            .then((res) => setStuff(res.data))
            .catch((err) => console.log(err.message));
    }, []);

Затем я отображать массив материалов с помощью lazyload, и он отлично работает: 

    {stuff ? (
                stuff.map((each) => {
                    return (
                            <LazyLoad
                                offset={[ -100, 100 ]}
                                placeholder={<h2>loading...</h2>}
                                key={each.id}
                            >
                                <h3 style={{ margin: 20 }}>{each.title}</h3>
                                <LazyLoad once={true} placeholder={`https://picsum.photos/id/${each.id}/5/5`}>
                                    <img
                                        data-aos-duration="2000"
                                        data-aos="fade"
                                        src={`https://picsum.photos/id/${each.id}/200/200`}
                                    />
                                </LazyLoad>
                            </LazyLoad>
                    );
                })
            ) : null}

Итак, сначала он отображает свойство заполнителя для каждого элемента, который

загружается ...

, а при прокрутке вниз он отображает фактический item.

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

loading ...

.

Как я могу определить длину массива материала, чтобы он не отображал загружаемый объект, когда он достигает конца массива?

1 Ответ

0 голосов
/ 13 июля 2020

Я исправил проблему, добавив высоту и ширину 100 пикселей в теги с загружаемым текстом внутри.

...