useFetch 无限循环答案

【问题标题】：useFetch Infinite LoopuseFetch 无限循环
【发布时间】：2021-12-16 10:18:56
【问题描述】：

我读到有人在不同的网站上发布过这个问题，但他们的错误与我的不同。我正在使用通用的useFetch 自定义钩子，它不会影响任何 atm。只是使用它会导致无限循环，我不明白为什么。

这是自定义钩子：

const useFetch = (config: AxiosRequestConfig) => {
    const [response, setResponse] = useState<AxiosResponse | null>(null);
    const [error, setError] = useState<any>(null);
    const [loading, setLoading] = useState<boolean>(true);

    config.baseURL = config.baseURL || "/api";

    useEffect(() => {
        axios
            .request(config)
            .then((res) => setResponse(res))
            .catch((err) => setError(err))
            .finally(() => setLoading(false));
    }, [config]);

    return { response, error, loading };
};

现在我在组件中所做的只是将一个变量初始化为useFetch({url: '/endpoint'})。

这会导致无限循环。如果我控制台记录结果，页面就会填满。如果我删除分配给 useFetch 它就会消失......

任何想法我做错了什么？

谢谢！

【问题讨论】：

标签： reactjs react-hooks infinite-loop

【解决方案1】：

我会在这里发布答案，以防它帮助其他人。

问题是每次将对象传递给useFetch 都会直接创建一个新对象。即使对象中的数据完全相同，但每次都在占用新的内存。我能想到两个简单的解决方案：

在组件中创建一个引用作为config 选项。那么传递的对象将是相同的。
在useFetch 钩子中解构对象，直到您拥有可用作依赖项的基本数据类型。

【讨论】：