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;

谢谢

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
    };
};

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

1 个答案: