React useEffect依赖数组致无限循环，方案合理性确认

首先，我们来拆解一下你之前遇到的无限循环问题：
当你把[data]作为useEffect的依赖数组时，每次effect内部调用setData(response.data)都会更新data的引用（因为数组是引用类型，即使内容相同，每次赋值都是新的引用）。而useEffect会监测依赖数组里的变量变化，一旦data变化，就会重新执行effect，进而再次调用setData，形成无限循环——这就是问题的根源。

而你提出的用[child]作为依赖数组的方案，完美解决了这个问题：

• 只有当用户点击子项名称，触发setChild更新child状态时，useEffect才会执行，发起API请求获取对应子项的数据。
• 请求完成后更新data，但data不在依赖数组里，所以不会触发useEffect重新执行，自然不会产生循环。

几个补充建议： #

1. 检查id的稳定性：如果你的id是来自组件的props或者其他状态，记得把它也加入依赖数组，避免闭包导致的旧值问题：

useEffect(() => {
 axiosWithAuth()
 .get(`/api/parent/children/${id}`)
 .then(response => {
   setData(response.data);
 })
 .catch(err => console.log(err));
}, [child, id]); // 加上id

2. 修复代码语法错误：你提供的代码里，.then后面多了一个分号，会导致语法错误，记得去掉：

// 错误写法
.then(response => {
 setData(response.data)
 });
.catch(err => console.log(err));

// 正确写法
.then(response => {
 setData(response.data);
})
.catch(err => console.log(err));

3. 确保axiosWithAuth的引用稳定：如果axiosWithAuth是你自定义的工具函数，要确保它不会在每次组件渲染时重新创建（比如用useCallback包裹，或者定义在组件外部），否则也可能导致useEffect意外触发。

总的来说，用child状态作为触发effect的依赖，完全符合你的需求——“用户点击子项名称时加载对应数据”，这个方案是可行且合理的。

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