React使用useEffect调用API获取数据时出现无限循环问题求助

问题根源 #

无限循环和filter/map操作本身无关，核心错误是按钮点击事件的绑定写法错误：

你写的代码是：

<button onClick={setIsActive(!isActive)}>

这种写法会在组件每次渲染时直接执行setIsActive(!isActive)，而不是等待用户点击后才触发。
setIsActive调用会修改isActive状态，状态更新会触发组件重新渲染，重新渲染又会再次执行setIsActive，由此形成无限循环。

为什么删除filter、map后循环消失 #

你删除的遍历渲染逻辑里包含了上述有问题的按钮代码，移除后就没有了渲染时自动调用状态更新的逻辑，循环自然终止，和数组过滤、遍历操作没有关联。

修复方案 #

把onClick的内容改为函数包裹，只有点击时才会执行状态更新逻辑，推荐两种写法：

1. 基础箭头函数包裹

<button onClick={() => setIsActive(!isActive)}>

2. 函数式状态更新（避免闭包导致的状态异常，更稳妥）

<button onClick={() => setIsActive(prev => !prev)}>

额外优化提示 #

你当前的isActive是全局公共状态，所有学生列表项会共用同一个展开/收起标识，点击任意按钮所有学生的按钮图标都会同步变化。如果需要实现每个学生单独控制展开收起，建议把isActive改为存储学生ID的集合，或者拆分为独立的学生组件单独维护自身的展开状态。

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