反应.如何在API调用时显示数据加载消息

Question

试图呈现一个返回产品数组的API调用。

如何在产品渲染上显示加载消息。(目前"正在加载";消息未显示)

useGetProducts.js

import { useEffect, useState } from "react";
import axios from "axios";
const useGetProducts = (API) => {
const [products, setProducts] = useState(null);
const [error, setError] = useState("");
const [loaded, setLoaded] = useState(false);
useEffect(() => {
(async () => {
try {
async function fetchData() {
const response = await axios(API);
setProducts(response.data)
}
fetchData();

} catch (error) {
setError(error.message);
} finally {
setLoaded(true);
}
})();
}, []);
return { products, error, loaded };
};
export default useGetProducts

ProductList.js

import React from "react";
import ProductItem from "./ProductItem";
import useGetProducts from "../hooks/useGetProducts";
import { Link } from "react-router-dom";
import { API } from '../constants/constants';
const ProductList = () => {
const data = useGetProducts(`${API}?limit=9&offset=0`);
return (
<section className="theme-section">
{data.loaded ? 
<>
{data.products && data.products.map((product) => (
<div key={product.id}>            
<ProductItem product={product} />
<Link to={`/product/${product.id}`}>ver detalle</Link>
<br /><br />
<hr />
</div>
))}
</>
: "loading"
}

</section>
)
}
export default ProductList;

当前消息未显示

Answer 1

这里发生的事情是，您调用fetchData而不等待它，这立即将loaded设置为true。

我不认为有必要fetchData函数,那么删除它或等待:

const [products, setProducts] = useState(null);
const [error, setError] = useState("");
const [loaded, setLoaded] = useState(false);
useEffect(() => {
(async () => {
const response = await axios(API);
setProducts(response.data)
} catch (error) {
setError(error.message);
} finally {
setLoaded(true);
}
})();
}, []);

Answer 2

在fetchData函数中输入loaded状态设置为false，在finally方法中输入loaded状态设置为true。

useEffect(() => {
(async () => {
try {
async function fetchData() {
setLoaded(false);
const response = await axios(API);
setProducts(response.data);
}
fetchData();

} catch (error) {
setError(error.message);
} finally {
setLoaded(true);
}
})();
}, []);