React Hook useEffect 缺少依赖项：“hideLoader”和“showLoader”。包括它们或删除依赖数组

Question

我该如何解决这个错误 => React Hook useEffect 缺少依赖项：'hideLoader' 和 'showLoader'。要么包含它们，要么移除依赖数组 react-hooks/exhaustive-deps

如果我使用[showLoader, hideLoader] 作为依赖项，那么 hideLoader 不起作用？我该如何解决这个问题... showLoader 总是显示微调器，甚至 axios 获取数据！

FullPageLoader.js

import React from "react";
import Spinner from './loader/spinner.gif

const FullPageLoader = () => {
    return (
        <div className="text-center">
            <img src={Spinner} className="fp-loader" alt="loading" style={{ marginTop: '8%' }} />
        </div>
    );
};

export default FullPageLoader;

使用FullPageLoader.js

import React, { useState } from "react";
import FullPageLoader from "../FullPageLoader";

const useFullPageLoader = () => {
    const [loading, setLoading] = useState(false);

    return [
        loading ? <FullPageLoader /> : null,
        () => setLoading(true), //Show loader
        () => setLoading(false) //Hide Loader
    ];
};

export default useFullPageLoader;

App.js

import useFullPageLoader from "../components/hook/useFullPageLoader";

const [loader, showLoader, hideLoader] = useFullPageLoader();

useEffect(() => {
    const fetchItems = async () => {
        try {
            showLoader();
            const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/approved/`);
            setItems(res.data)
            hideLoader();
        }
        catch (err) {
            console.log(`???? Axios request failed: ${err}`);
        }
    }
    fetchItems();
}, [hideLoader, showLoader]);

Answer 1

它告诉你该怎么做：

const [loader, showLoader, hideLoader] = useFullPageLoader();

useEffect(() => {
    const fetchItems = async () => {
        try {
            showLoader();
            const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/approved/`);
            setItems(res.data)
            hideLoader();
        }
        catch (err) {
            console.log(`? Axios request failed: ${err}`);
        }
    }
    fetchItems();
}, [showLoader, hideLoader]); // add dependencies here...