问题描述
我在此链接上部署了一个 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;
我希望我的解释已经清楚,在此先感谢!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)