如何解决useEffect依赖products引发的API重复调用问题？

核心问题分析 #

你当前的代码里，useEffect依赖了products和transformData：

• 每次调用setProducts更新products，都会触发useEffect重新执行，再次调用API获取数据，形成无限循环
• transformData是组件内部定义的普通函数，每次组件渲染都会重新创建一个新的函数引用，也会导致useEffect反复触发

具体修复步骤 #

1. 移除不必要的依赖项 #

API数据只需要在组件初始化时获取一次，不需要把products作为依赖。如果后续需要手动刷新数据，可以单独加一个触发变量。

2. 稳定transformData的函数引用 #

使用useCallback包裹transformData，避免每次渲染都创建新的函数引用，这样可以安全地把它加入依赖（或者如果它不依赖外部变量，也可以直接移到组件外部）。

修复后的代码示例 #

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

const [products, setProducts] = useState([]);
// 用useCallback稳定函数引用
const transformData = useCallback((data) => {
  return data.map((item) => ({
    id: item.structureId,
    name: item.name,
    parent: item.parentName,
    isActive: item.isActive,
  }));
}, []); // 没有外部依赖，空数组即可

useEffect(() => {
  apiData()
    .then((data) => {
      const transformedData = transformData(data);
      setProducts(transformedData);
    })
    .catch((error) => console.error("Error in fetching data:", error));
}, [transformData]); // 只依赖稳定后的transformData

3. 处理isActive切换的更新逻辑 #

当开关切换isActive时，不需要重新调用API，直接在本地更新products数组即可：

const handleToggleActive = (productId) => {
  setProducts(prevProducts => 
    prevProducts.map(product => 
      product.id === productId 
        ? {...product, isActive: !product.isActive} 
        : product
    )
  );
};

可选：手动刷新数据的方案 #

如果需要手动触发API重新获取数据（比如点击刷新按钮），可以添加一个触发状态：

const [refreshTrigger, setRefreshTrigger] = useState(0);

// 刷新按钮的点击事件
const handleRefresh = () => {
  setRefreshTrigger(prev => prev + 1);
};

useEffect(() => {
  apiData()
    .then((data) => {
      const transformedData = transformData(data);
      setProducts(transformedData);
    })
    .catch((error) => console.error("Error in fetching data:", error));
}, [transformData, refreshTrigger]); // 加入refreshTrigger作为依赖

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