React：useEffect钩子持续重复渲染问题求助

你的代码出现无限循环渲染的核心原因是：useEffect的依赖数组中包含了expenses状态，而getItems函数内部调用setExpenses会修改这个状态，状态更新后又会触发useEffect重新执行，形成循环。

修复步骤： #

• 修正依赖数组：移除expenses，换成请求实际依赖的变量user.userInfo.username——只有当用户名变化时才重新发起请求，避免不必要的重复调用。
• 修正useState拼写：原代码中UseState首字母大写是错误的，React钩子都是小驼峰命名useState。
• 可选优化：用useCallback包裹getItems，避免组件每次渲染都创建新的函数实例，提升性能。

修复后的代码： #

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

// ...

const [expenses, setExpenses] = useState([]);

const getItems = useCallback(async () => {
  try {
    // 当前我们获取了所有支出数据并按用户名筛选，但后续应仅获取该用户的相关数据 --> 此部分待修改
    const data = await axios.get('https://controladorgastosapi.herokuapp.com/expenses/', {
      headers: {
        username: user.userInfo.username
      }
    });
    const result = data.data;
    setExpenses(result);
  } catch (err) {
    console.log(err);
  }
}, [user.userInfo.username]); // 依赖用户名，仅当用户名变化时重新创建函数

useEffect(() => {
  getItems();
}, [getItems]); // 依赖getItems，而getItems的依赖是用户名，实现精准触发

简化版（如果只需要初始化请求一次）： #

如果你的数据只需要在组件挂载时请求一次，直接将依赖数组留空即可：

const [expenses, setExpenses] = useState([]);

useEffect(() => {
  const getItems = async () => {
    try {
      const data = await axios.get('https://controladorgastosapi.herokuapp.com/expenses/', {
        headers: {
          username: user.userInfo.username
        }
      });
      setExpenses(data.data);
    } catch (err) {
      console.log(err);
    }
  };
  getItems();
}, []); // 空依赖数组，仅在组件挂载时执行一次

内容的提问来源于stack exchange，提问作者Tomás Gabriel