求助：将useState状态作为useEffect依赖引发无限循环问题

问题根源 #

你当前的逻辑陷入了死循环：把orders状态作为useEffect的依赖，而useEffect里调用的loadData又会通过setOrders更新orders状态——状态更新触发组件重新渲染，useEffect检测到依赖变化再次执行，循环往复。

解决方案 #

以下是几种可行的处理方式，根据你的实际需求选择：

方案1：仅初始化加载（适合无需自动刷新的场景）

如果只需要页面首次加载时获取数据，直接将useEffect的依赖数组设为空，确保它仅在组件挂载时执行一次：

const [orders, setOrders] = useState([]);
const [total, setTotal] = useState(0); // 假设total是你用到的另一个状态

const loadData = async () => {
  const response = await fetch("http://localhost/k-shop/load.php");
  const result = await response.json();
  setOrders(result);
};
const loadTotal = async () => {
  const response = await fetch("http://localhost/k-shop/amount.php");
  const result = await response.json();
  setTotal(result);
};

useEffect(() => {
  loadData();
  loadTotal();
}, []); // 空依赖数组，仅组件挂载时执行一次

方案2：通过触发变量控制刷新（适合需要主动刷新的场景）

如果需要在特定操作（比如新增/删除订单）后自动刷新数据，可以新增一个专门的触发状态，用它来控制useEffect的执行：

const [orders, setOrders] = useState([]);
const [total, setTotal] = useState(0);
const [refreshTrigger, setRefreshTrigger] = useState(0); // 用于触发刷新的变量

const loadData = async () => {
  const response = await fetch("http://localhost/k-shop/load.php");
  const result = await response.json();
  setOrders(result);
};
const loadTotal = async () => {
  const response = await fetch("http://localhost/k-shop/amount.php");
  const result = await response.json();
  setTotal(result);
};

useEffect(() => {
  loadData();
  loadTotal();
}, [refreshTrigger]); // 依赖触发变量，变量变化时执行刷新

// 当需要刷新数据时调用此函数（比如新增订单完成后）
const handleRefresh = () => {
  setRefreshTrigger(prev => prev + 1); // 修改触发变量的值，触发useEffect执行
};

方案3：定时自动刷新（适合需要周期性更新的场景）

如果需要页面定期自动刷新数据，可以借助定时器实现：

const [orders, setOrders] = useState([]);
const [total, setTotal] = useState(0);

const loadData = async () => {
  const response = await fetch("http://localhost/k-shop/load.php");
  const result = await response.json();
  setOrders(result);
};
const loadTotal = async () => {
  const response = await fetch("http://localhost/k-shop/amount.php");
  const result = await response.json();
  setTotal(result);
};

useEffect(() => {
  // 每5秒刷新一次数据，可根据需求调整时间
  const refreshInterval = setInterval(() => {
    loadData();
    loadTotal();
  }, 5000);

  // 组件卸载时清除定时器，避免内存泄漏
  return () => clearInterval(refreshInterval);
}, []);

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