当React JS中的Fetch API从服务器加载数据时，如何显示旋转器？

发布于 2025-01-27 11:11:53 字数 392 浏览 3 评论 0原文

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

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

原文

I am developing a React app where I have to load data from the server on the home page. It takes a small amount of time when loading data from the server. I want to display a spinner when the fetch api is called. I already created a spinner component, but I don't know how to display that spinner when the fetch api is triggered.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一江春梦 2025-02-03 11:11:53

用钩子控制加载程序状态，然后使用.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 />;
}

Control your loader state with hooks and use .finally() to convert your loading state back to 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 />;
}

回复收藏 0 原文

零崎曲识 2025-02-03 11:11:53

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 />

尝试一下

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 />

Try this

回复收藏 0 原文

~没有更多了~