comment montrer le chargeur en réaction. en utilisant des crochets

Question

J'utilise axios pour communicate avec le serveur.Je souhaite afficher le chargeur lorsque l'utilisateur demande au serveur et masquer le chargeur lorsque la demande est terminée

Je crée donc un composant personnalisé pour effectuer cette tâche .Mais mon interface utilisateur se bloque lorsque je clique plusieurs fois sur le même bouton

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>





    );
};

Le problème est sur useeffect

quand je commente le code useEffect, cela fonctionne parfaitement.

NoTe: showloading et hideloading augmentent et diminuent le nombre de chargements.

Je pense que j'ai désalloué l'objet axios lorsque le composant est démonté. ???

Answer 1

j'utilise habituellement ce code pour afficher le chargement lorsque les données de la demande sont en cours de traitement et le masquer une fois terminé

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>