在react app中获取api时加载旋转器未显示

Question

当网站首次加载时，从api获取的数据不显示。但在一次重新装载后，产品就会显示出来。试图在加载数据时使用加载旋转器。旋转器也不会显示。如何在第一次加载时显示加载的数据，而在加载产品时将显示加载旋转器。

const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
setIsLoading(true);
fetch(" https://hidden-citadel-3557.herokuapp.com/inventory")
.then((res) => res.json())
.then((data) => setInventories(data));
setIsLoading(false );  }, []); `
if (isLoading) {
return <Loading></Loading>  }

Answer 1

Move "setIsLoading(false)"到第二个".then"，如下:

const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
setIsLoading(true);
fetch(" https://hidden-citadel-3557.herokuapp.com/inventory")
.then((res) => res.json())
.then((data) => {
setIsLoading(false);
setInventories(data)
});
}, []); 
if (isLoading) {
return <Loading></Loading>  }

Answer 2

根据你的代码，你的方法不是很可行。

我要这样做。

1. 使用单独的函数加载数据

function loadData()
{
setLoading(true);
fetch(" https://hidden-citadel-3557.herokuapp.com/inventory")
.then((res) => res.json())
.then((data) => {
setInventories(data);
setLoading(false);
});
}

2. 然后执行你的效果:

useEffect(loadData,[]);

3. 在您的jsx中，使用loading变量根据加载状态变量值来渲染<loading>元素:

{ loading ? <loading></loading> : ""}

Answer 3

这个适合我:

import React, { useState, useEffect } from "react";
const Index = () => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
const response = await fetch(
"https://627a5a9773bad50685876437.mockapi.io/users"
);
await response.json();
setIsLoading(false);
};
fetchData();
}, []);
return isLoading ? <p>Loading</p> : <p>Loaded!</p>;
};
export default Index;