如何在 REACT JS 中通过 fetch api 从服务器加载数据时显示微调器？

Question

我正在开发一个 React 应用程序，我必须在主页上从服务器加载数据。从服务器加载数据时需要少量时间。我想在调用 fetch api 时显示微调器。我已经创建了一个微调器组件，但我不知道如何在触发提取 api 时显示该微调器。

const [product,setProduct]=useState({});
useEffect(()=>{
    fetch(`http://localhost:5000/readSingleCarsData/${id}`)
    .then(res=>res.json())
    .then(data=> {
        setProduct(data)
        setQuantity(data.quantity)
    });
},[])

Answer 1

const [product,setProduct]=useState({})
const [isLoading, setLoading]=useState(false);

useEffect(()=>{
    setLoading(true);
    fetch(`http://localhost:5000/readSingleCarsData/${id}`)
    .then(res=>res.json())
    .then(data=> {
        setProduct(data)
        setQuantity(data.quantity)
        setLoading(false);
    });
},[]);

return isLoading ? <Spiner /> : <Component />

试试这个

Answer 2

使用钩子控制您的加载程序状态，并使用 .finally() 将您的加载状态转换回 false。

import { useEffect, useState } from 'react';

export default function Home() {
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setLoading(true);
        fetch('/api/hello')
            .then((res) => res.json())
            .then((data) => {
                // do something with data
            })
            .catch((err) => {
                console.log(err);
            })
            .finally(() => {
                setLoading(false);
            });
    }, []);

    if (loading) {
        return <LoadingComponent />;
    }

    return <MyRegularComponent />;
}

如何在 REACT JS 中通过 fetch api 从服务器加载数据时显示微调器？

How to display a spinner when data is loading from server by fetch api in REACT JS?

loading

spinner

reactjs