web-dev-qa-db-ja.com

反応でローダーを表示する方法。フックを使用して

サーバーで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コードをコメントアウトすると、完全に機能します。

NoTe：showloadingおよびhideloadingは、ロード数を増減します。

コンポーネントがアンマウントされたときに、axiosオブジェクトの割り当てを解除したと思います。???

javascriptreactjsreact-reduxreact-hooksreact-hook-form
3
user944513

私は通常、このコードを使用して、要求データの処理中にロードを表示し、完了時に非表示にします

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>
0
Mahmud She Putra Pandawa