如何在反應中顯示加載程序。 使用鈎子

Question

我正在使用axios與服務器communicate 。我想在用戶請求服務器時顯示加載器，並在請求完成時隱藏加載器

所以我制作了一個自定義組件來完成這項任務。但是當我在同一個按鈕上多次單擊時我的 UI 掛起

const Loader = () => {
    const { loadingCount } = useLoadingState(),
        {showLoading, hideLoading} = useLoadingActions();

    useEffect(()=>{
        const self = this
        axios.interceptors.request.use(function (config) {
            showLoading();
            return config
        }, function (error) {
            return Promise.reject(error);
        });

        axios.interceptors.response.use(function (response) {
            // spinning hide
            // self.props.loading(false)
            hideLoading()
            return response;
        }, function (error) {
            hideLoading();
            return Promise.reject(error);
        });
    })


    return (
        <div>
            {loadingCount > 0 ?<div style={{position:"fixed",display:"flex",justifyContent:"center",alignItems:"center",width:'100%',height:'100%',zIndex:999999}}>
                {/*{loadingCount > 0 ? */}
                <Spin tip="Loading..." style={{zIndex:999999}}></Spin>
                {/*: null}*/}
            </div>: null}
        </div>





    );
};

問題在於使用useeffect

當我注釋掉 useEffect 代碼時，它可以完美運行。

注意：showloading 和 hideloading 增加和減少加載次數。

我想我在組件卸載時釋放了 axios 對象。？？？

Answer 1

將空數組添加到 sencod 參數到useEffect 。
它的工作方式類似於功能組件中的componentDidMount() 。

 const { useState, useEffect } = React; const Counter = () => { const [count, setCount] = useState(0) const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { setTimeout(() => { setIsLoaded(true); }, 3000); }, []); // here return ( <div> { isLoaded && <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> } </div> ) } ReactDOM.render(<Counter />, document.getElementById('app'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script> <div id="app"></div>

Answer 2

我通常使用此代碼在處理請求數據時顯示加載並在完成時隱藏

 const Loader = () => { const {data, setdata} = useState([]) useEffect(()=>{ axios.get('your host').then(res => { setdata(res.data); }).catch(err => { setdata(res.data); } }); return ( <div> {data.length > 0 ? <div style={{position:"fixed",display:"flex",justifyContent:"center",alignItems:"center",width:'100%',height:'100%',zIndex:999999}}> </div> : <Spin tip="Loading..." style= {{zIndex:999999}}> </Spin> </div> ); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

首先，我在共享文件夾中創建了加載組件。 我正在使用 Daisy UI，這就是為什么你必須先安裝 tailwind & daisy 否則它將無法工作。 我的加載代碼：

import React from 'react';

const Loading = () => {
    return (
        <div className="flex items-center justify-center ">
        <div className="w-16 h-16 border-b-2 border-gray-900 rounded-full animate-spin"></div>
    </div>
    );
};

export default Loading;

然后我在我的 Allproduct 組件中使用這個 Loading 組件。 為了查看加載，我創建了重新加載 useState。您將在我的代碼中看到下面的內容，這將有助於我的加載程序在獲取時間很長時顯示。

import React, { useEffect, useState } from 'react';
import Loading from '../Shared/Loading';
import AllProduct from './AllProduct';

const AllProducts = () => {
    const [products, setProduct]=useState([])
    const [Reload, setReload] = useState(true);

    useEffect(()=>{
        fetch('https://stormy-hamlet-97462.herokuapp.com/products/')
        .then(res=>res.json())
        .then(data=>{setProduct(data)
            setReload(false)})

    },[])

    if(Reload){
        return <Loading></Loading>
    }
    return (
        <div>
           <h4 className='text-4xl text-primary text-center sm:w-full px-32 mx-5 
           lg:my-12 '>All Products</h4>
             <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5'>
               {
                   products.map(product=><AllProduct key={product._id} product={product} ></AllProduct>)
               }

           </div>
            
        </div>
    );
};

export default AllProducts;