解决useEffect依赖getData每次渲染变化的警告问题

问题源于getData函数在组件每次渲染时都会重新创建，导致useEffect的依赖getData引用频繁变化，既触发不必要的重复执行，也引发了编辑器警告。使用useCallback可以稳定函数引用，但需正确配置依赖项：

import { useEffect, useCallback } from 'react';

// ...

const getData = useCallback(async () => {
  try {
    const response = await axios.get("http://localhost:8081/fetch-all-sales");
    setSalesRows(response?.data.data);
    setLoading(true);
  } catch (err) {
    console.log("freaking error");
  }
}, []); // setSalesRows、setLoading是React提供的稳定状态更新函数，无需加入依赖

useEffect(() => {
  totalSales = 0;
  totalQuantity = 0;
  getData();
}, [getData]);

补充说明 #

• React的状态更新函数（如setSalesRows、setLoading）在组件生命周期内引用始终稳定，因此不需要添加到useCallback的依赖数组中。
• 如果totalSales和totalQuantity是通过useState声明的组件状态，不要直接赋值，应使用对应的状态更新函数（比如setTotalSales(0)），否则无法触发组件重渲染，还可能引发逻辑异常。

内容的提问来源于stack exchange，提问作者Bibek Bhattarai