javascript - React Hook useEffect 缺少依赖项：'fetchTracker'。包括它或删除依赖数组

Question

我在我的一个项目中遇到过这个问题。此特定文件跟踪数据，以便可以将其放置在应用程序的地图上。

我在 StackOverflow 上的其他地方查看了该问题的解释和解决方案，但我没有找到任何有效的方法。任何见解将不胜感激。

import { useEffect, useState } from 'react';
import axios from 'axios';

const API_HOST = '...';
const ENDPOINTS = [...];
const defaultState = {...};

const useTracker = ({ api = 'all' }) => {
    const [tracker = {}, updateTracker] = useState(defaultState);

    async function fetchTracker() {
        let route = ENDPOINTS.find(({ id } = {}) => id === api);
        let response;

        if (!route) {...}

        try {...} catch (e) {...}

        const { data } = response;

        updateTracker((prev) => {
            return {
                ...prev,
                state: 'ready',
                data
            };
        });
    }

    useEffect(() => {
        fetchTracker();
    }, [api]);

    return {
        fetchTracker,
        ...tracker
    };
};

export default useTracker;

谢谢

标签： javascriptreactjsreact-hooks

Answer 1

您需要包含它以防止副作用。为了防止无限循环将其包装在 useCalback 中：

const useTracker = ({ api = 'all' }) => {
    const [tracker = {}, updateTracker] = useState(defaultState);

    const fetchTracker = React.useCallback(async () => {
        let route = ENDPOINTS.find(({ id } = {}) => id === api);
        let response;

        if (!route) {...}

        try {...} catch (e) {...}

        const { data } = response;

        updateTracker((prev) => {
            return {
                ...prev,
                state: 'ready',
                data
            };
        });
    },[api]);

    useEffect(() => {
        fetchTracker();
    }, [api, fetchTracker]);

    return {
        fetchTracker,
        ...tracker
    };
};