React useEffect获取数据时陷入无限循环问题求助

你的问题核心是useEffect没有指定依赖数组，导致组件每次渲染（包括状态更新后的重渲染）都会重复执行这个effect，进而触发状态更新，形成无限循环。

修改方案： #

1. 给useEffect添加空依赖数组[]，确保它只在组件挂载时执行一次
2. 修正catch逻辑：异步回调中直接throw error无法被捕获，建议改为记录错误或设置错误状态

修改后的代码： #

function AppNew () {
  const [matchData, setMatchData] = useState(null)
  const [matchesLoaded, setMatchesLoaded] = useState(false)
  const [error, setError] = useState(null) // 新增错误状态

  useEffect(() => {
    let active = true;
    
    axiosInstance.get("api/matches/")
        .then(responseMatches => {
            if (active) {
                setMatchData(responseMatches.data);
                setMatchesLoaded(true);
            }
        })
        .catch(error => {
            setError(error.message); // 用状态记录错误
            console.error("获取数据失败:", error);
        })

    return () => {
        active = false
    }
  }, []); // 这里添加空依赖数组
  
  if (error) return <div>加载失败: {error}</div>
  if (!matchesLoaded) return <div>加载中...</div>

  console.log("match data: ", matchData);
  return <div>数据已加载</div>
} 

关键说明： #

• 空依赖数组[]告诉React这个effect不需要依赖任何状态或props，只会在组件首次挂载时执行一次，避免重复触发请求
• 新增错误状态可以更好地处理请求失败的情况，提升用户体验
• 移除了无意义的responseMatches变量赋值，直接调用axios请求即可

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