Reactjs 显示加载指示器，直到库中的所有图像（完全）从React中的API加载（使用挂钩）

我正在学习React，并试图通过使用API创建一个简单的网站，基本上是一个Giphy搜索引擎

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

是否有一种方法可以使加载指示器仅在加载所有内容时消失？

是我的加载指示器。我还使用了一些组件

以下是我当前的两个组件：

App.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

import React，{useState，useffect}来自“React”
导入“react-loader-spinner/dist/loader/css/react-spinner-loader.css”
从“react Loader spinner”导入加载器
从“./Components/Results”导入结果
从“reactstrap”导入{UncontrolleAlert}
函数App（）{
常量[isLoading，setLoading]=useState（真）
const[gifsData，setGifsData]=useState（[]
常量[errorMessage，setErrorMessage]=使用状态（“”）
useffect（（）=>{
const giphyTrending=async（）=>{
待命(`https://api.giphy.com/v1/gifs/trending?api_key=OGINPHAsY1NNNhf6XIlpX1OygKXDFfXV&limit=50&rating=R`)
.then（res=>res.json（））
。然后（数据=>{
setGifsData（data.data）
设置加载（错误）
})
.catch（err=>setErrorMessage（err.message））
}
giphyTrending（）
}, [])
如果（错误消息）{
返回(
{errorMessage}
)
}
返回(
{孤岛加载？
:
}
)
}
导出默认应用程序

Results.jsx（不确定是否需要这个，只是以防万一）

const结果=（道具）=>{
返回(
{props.gifsData.map（gif=>(
))}
)
}
导出默认结果

看看它，你似乎可以为

img

提供一个

onLoad

道具（我猜这就是你在

CardImg

的引擎盖下使用的东西）。如果是这样，您可以在加载后让它们中的每一个都启动一个函数，跟踪父组件中的那些，并且当您从

fetch

接收的图像计数与加载的图像计数匹配时，您可以删除加载指示器

这是在做一些假设。如果您想让我为您绘制流程，请告诉我。

查看它，您似乎可以为

img

提供一个

onLoad

道具（我猜这就是您在

CardImg

的引擎盖下使用的）。如果是这样，您可以在加载后让它们中的每一个都启动一个函数，跟踪父组件中的那些，并且当您从

fetch

接收的图像计数与加载的图像计数匹配时，您可以删除加载指示器

---

这是在做一些假设。如果您希望我为您绘制流程，请告诉我。

检查此链接，您可以在状态中保持计数，并通过点击0确保加载所有图像。所以loading=loading.state和imageload.state.count！=0

---

检查此链接，您可以在状态中保持计数，并通过点击0确保加载所有图像。所以loading=loading.state和imageload.state.count！=0

---

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

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

---

在CardImage组件中，当图像完全加载时，我们使用OnLoad功能道具更新计数器。当计数器不等于gifsData.length-1时，将显示指示灯视图。例如，我们定义了一个计数器：

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

---

在CardImage组件中，当图像完全加载时，我们使用OnLoad功能道具更新计数器。当计数器不等于gifsData.length-1时，将显示指示灯视图

抱歉延迟。我正忙于其他事情。你的回答很有帮助，但我最终还是使用了这个解决方案：我认为它是类似的。如果你觉得不合适，请告诉我。非常感谢。抱歉耽搁了。我正忙于其他事情。你的回答很有帮助，但我最终还是使用了这个解决方案：我认为它是类似的。如果你觉得不合适，请告诉我。非常感谢。看起来很有趣，但无法使其在带有挂钩的功能组件中工作。那个ref对于我的水平来说是非常先进的，我无法将它转换为我的项目中的工作。我使用了这个解决方案-。非常感谢。看起来很有趣，但无法使其在带有挂钩的功能组件中工作。那个ref对于我的水平来说是非常先进的，我无法将它转换为我的项目中的工作。我使用了这个解决方案-。非常感谢。