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;

useFullPageLoader.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...

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

1 个答案: