React Hooks fetch数据时触发Too many re-render错误如何解决

1. 无限重渲染（Too many re-render）的核心修复 #

你出现无限重渲染是两个问题共同导致的：

• useEffect依赖数组配置错误：
  你当前的useEffect依赖数组里加入了datas相关属性、allVideo等状态，而这些状态刚好是你在useEffect内部会更新的值，就会形成「useEffect触发→更新状态→依赖变化→再次触发useEffect」的死循环。
  你只需要保留真正会影响请求参数的变量作为依赖即可，修改后的依赖数组：

  // 只保留userId和zoneId，其他状态都是请求结果，不需要作为触发依赖
  }, [userId, zoneId]);
  

• 单选框事件绑定错误：
  你给radio绑定onchange的时候直接执行了setnewVideo(video.id)，会导致组件每次渲染都直接触发状态更新，进一步加剧重渲染。需要改成点击时才执行的形式，同时注意React事件名是驼峰格式：

  // 修改前
  onchange={setnewVideo(video.id)}
  // 修改后
  onChange={() => setnewVideo(video.id)}
  

2. allVideo遍历异常的修复 #

你初始化allVideo的时候是空数组[]，但你后续遍历的是allVideo.content，空数组不存在content属性，会导致遍历不生效。可以修改初始化逻辑：

// 修改前
const [allVideo, setAllVideo] = useState([]);
// 修改后，匹配接口返回的结构，避免访问content时为undefined
const [allVideo, setAllVideo] = useState({content: []});

或者在遍历的时候先做兼容判断：

{allVideo?.content?.length > 0 && allVideo.content.map(/* 遍历逻辑 */)}

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