reactjs - 如何修复 React 项目中的 Spinner 行为以等待 img 渲染

Question

我在此链接上部署了一个 React 项目：https ://musing-hermann-5129b4.netlify.app/models

最近我在渲染开始的时候加了一个spinner，但是我没有找到等待主页渲染的方法，所以我需要改变spinner的行为，所以它可以在所有主页完成渲染时停止，特别是图像，由于 fetch api 需要一些时间来加载：

这是app.js的代码

import React, { useState, useEffect} from 'react';
import ModelFooter from "./components/Models/ModelFooter";
import FileModel from "./components/FileModel/FileModel";
import Navbar from "./components/Nav/Navbar";
import Models from "./components/Models/Models";
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';
import Logo from "./assets/img/logo.png";
import ModelsProvider from "./context/ModelsContext";
import Spinner from "./components/Spinner";


function App() {

  const [ loading, setLoading ] = useState(false);

  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 4000);
  }, [])

  return (
    <ModelsProvider>
        { loading ?
           <Spinner loading={loading} />
        :
        <main> 
        <Router>
            <div className="content-container">   
              <nav className="navbar">
                  <img src={Logo} className="logo" alt="Ego Logo" />
                  <div className="menu-container">
                      <Link to={'/models'} className="menu-items">Modelos</Link>
                      <Link to={`/models/:id`} className="menu-items">Ficha del Modelo</Link>
                  </div>
                  <div className="bottom-line"></div>             
              </nav>
              <Switch>
                <Route exact path="/"><Redirect to="/models"/></Route>
                <Route exact path='/models' component={Models} />
                <Route exact path='/models/:id' component={FileModel} />
              </Switch>
            
              <Navbar />
            </div>
          <ModelFooter />
        </Router>
      </main>
        }
    </ModelsProvider>
  );
}

export default App;

这是 app.js 获取 api 数据的 ModelsContext.jsx：

import React, { createContext, useState, useEffect } from 'react';

export const ModelsContext = createContext();

const ModelsProvider = (props) => {

        //State de modelos
        const [ modelo, guardarModelo ] = useState([]);
        const [ modelos, guardarModelos ] = useState([]);
        const [ allModelos, guardarAllModelo ] = useState([]);

        const { id } = modelo;


         //Cargar un modelo
         useEffect(() => {
             const consultarAPI = async () => {         
                try {
                    const api = await fetch("https://challenge.agenciaego.tech/models");
                    const modelos = await api.json();
    
                    const api2 = await fetch(`https://challenge.agenciaego.tech/models/${id ? id : ""}`);
                    const modelo = await api2.json();
           
                    guardarAllModelo(modelos);
                    guardarModelos(modelos);
                    guardarModelo(modelo);

                } catch (error) {
                   console.log(error); 
                }
             }
             consultarAPI()
         }, [id]);

    return (
        <ModelsContext.Provider
            value={{
                allModelos,
                modelo,
                modelos,
                guardarModelo,
                guardarModelos
            }}
        >
            {props.children}
        </ModelsContext.Provider>
    )
}

export default ModelsProvider;

我希望我的解释很清楚，在此先感谢！

标签： reactjsimageapifetchspinner