当react lazyload占位符道具到达数组末尾时，我如何将其设置为none

Question

我正在为我的react js项目使用react lazylod库。

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));
}, []);

然后我用lazylod显示填充数组，它运行得非常好：

{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}

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

加载

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

唯一的问题是，它不知道项目何时完成，也没有项目可显示，所以当你到达屏幕末端，项目完成时，它仍然显示

加载

.

我如何判断填充数组的长度，使其在到达数组末尾时不显示加载的东西？

Answer 1

我通过在标签中添加100px的高度和宽度来修复这个问题，标签中有加载文本。