当到达数组末尾时，如何将 react-lazyload placeholder prop 设置为 none？

Question

我正在为我的 React js 项目使用 react-lazyload 库。

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 ? (
                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}

因此，它首先显示每个项目的占位符道具，这些项目正在

loading...

并通过向下滚动显示实际项目。

唯一的问题是它不知道项目何时完成并且没有要显示的项目，所以当您到达屏幕末尾并且项目完成时它仍然显示

loading ...

.

我如何知道填充数组的长度，以便它在到达数组末尾时不显示正在加载的内容？

Answer 1

我通过将 100px 的高度和宽度添加到带有加载文本的标签中解决了这个问题。

当到达数组末尾时，如何将 react-lazyload placeholder prop 设置为 none？

How can I set react-lazyload placeholder prop to none when it reaches the end of an array?

reactjs

lazy-loading

react-lazy-load

loading...

loading ...