React useEffect依赖未变更却引发无限渲染与重复GET请求问题求助

你代码的核心问题出在GetUserData的调用位置和状态更新逻辑的相互冲突，直接触发了无限重渲染循环。

• 你把GetUserData直接写在了组件的顶层执行逻辑中，组件每次渲染都会无条件执行一次这个函数。根据你的注释，GetUserData内部会发起GET请求，并且会调用你传入的setUsers更新状态。
• React中调用setXxx状态更新函数会触发组件重新渲染，重渲染后又会再次执行顶层的GetUserData，再次调用setUsers，由此形成「调用GetUserData→setUsers→重渲染→调用GetUserData」的无限循环。
• 空依赖useEffect中额外的setUsers(userData)属于多余操作，会在组件首次挂载后额外触发一次状态更新，进一步推动循环触发。
• 你将users状态本身作为参数传入GetUserData，每次users更新后传入的参数变化，如果GetUserData内部存在监听参数变化触发请求的逻辑，也会加剧循环。

调整逻辑，把数据请求的操作放到useEffect中统一处理，只在组件首次挂载时发起请求，拿到服务端返回的用户数据后再生成需要渲染的组件，修正后的代码如下：

export default function ShowUsers() {
  const [users, setUsers] = React.useState([]);
  const classes = useStyles();

  useEffect(() => {
    // 仅在组件首次挂载时调用接口请求数据
    GetUserData(classes, setUsers);
  }, [classes]); // 把稳定的classes加入依赖数组，避免ESLint警告

  // 拿到users数据后再遍历生成渲染组件，不要直接把请求函数的返回值当渲染内容
  const userList = users.map(user => {
    // 这里写你之前在GetUserData里生成组件的逻辑
    return <div key={user.id} className={classes.userItem}>{user.name}</div>
  })

  return (
    <div style={divStyle}>
      {userList}
    </div>
  );
}

同时你需要同步调整GetUserData的逻辑：移除对users参数的依赖，只在接口请求成功后调用setUsers传入从服务端拿到的原始用户数据数组即可，不要在GetUserData内部生成组件、也不要在内部重复触发状态更新。

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