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

Question

我正在学习React，我正在尝试通过使用其API创建一个简单的站点，该站点基本上是Giphy搜索引擎。

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

有没有一种方法可以使加载指示器仅在加载所有内容后才会消失？

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

这是我当前的两个组成部分：

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

我正在学习React，我正在尝试通过使用其API创建一个简单的站点，该站点基本上是Giphy搜索引擎。到目前为止，我正在获取和显示数据（趋势Giphy图像）。 ...

Answer 1

Answer 2