显示加载指示器，直到图库中的所有图像都从 React 中的 API 加载(完全)(使用 Hooks)

Question

我正在学习React，我正在尝试通过使用他们的API制作一个简单的网站，它基本上是一个Giphy搜索引擎。

到目前为止一切顺利，我正在获取和显示数据(趋势 Giphy 图像(。问题是我不喜欢我的加载指示器的工作方式。它显示了一些，但是当它消失时，(40(图像仍在容器中填充。

有没有办法让我只有在加载所有内容后才能使加载指示器消失？

<Loader>是我的加载指示器。我也在使用一些Reactstrap组件。

这是我目前的 2 个组件：

应用.js

import React, { useState, useEffect } from 'react'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
import Loader from 'react-loader-spinner'
import Results from './Components/Results'
import { UncontrolledAlert } from 'reactstrap'

function App() {
const [isLoading, setLoading] = useState(true)
const [gifsData, setGifsData] = useState([])
const [errorMessage, setErrorMessage] = useState('')
useEffect(() => {
const giphyTrending = async () => {
await fetch(`https://api.giphy.com/v1/gifs/trending?api_key=OGINPHAsY1NNNhf6XIlpX1OygKXDFfXV&limit=50&rating=R`)
.then(res => res.json())
.then(data => {
setGifsData(data.data)
setLoading(false)
})
.catch(err => setErrorMessage(err.message))
}
giphyTrending()
}, [])
if (errorMessage) {
return (
<div>
<UncontrolledAlert color="secondary">{errorMessage}</UncontrolledAlert>
</div>
)
}
return (
<div className='App'>
{isLoading ?
<Loader className='loader' type="Circles" color="yellow" height={120} width={120} />
:
<Results isLoading={isLoading} gifsData={gifsData} />}
</div>
)
}
export default App

结果.jsx(不确定是否需要这个，但以防万一(

const Results = (props) => {
return (
<div className='gifsContainer'>
{props.gifsData.map(gif => (
<div key={gif.id}>
<CardImg className='gifs' src={gif.images.fixed_height_small.url} alt={gif.title} />
</div>))}
</div>
)
}
export default Results

Answer 1

看看这个 SO 问题，看起来你可以为img提供一个onLoad道具(我猜这就是你在CardImg引擎盖下使用的(。 如果是这样，您可以在加载每个函数后触发它们，跟踪父组件中的这些函数，并且当您从fetch收到的图像计数与加载的图像计数匹配时，您可以删除加载指示器。

这是在做一些假设。 如果您希望我为您勾勒出该流程，请告诉我。

Answer 2

检查此链接，您可以在状态中保持计数，并保证通过按 0 加载所有图像。所以 load = load.state and imageload.state.count ！= 0。

https://www.javascriptstuff.com/detect-image-load/

Answer 3

例如，我们定义一个计数器：

const [counter, setCounter] = useState(0);

在 CardImage 组件中，我们使用OnLoad函数属性在图像完全加载时更新计数器。虽然计数器不等于gifsData.length - 1，但将显示指标视图