React使用useEffect钩子向后端发请求出现无限循环问题

你当前代码中useEffect未传入第二个依赖数组参数，是触发无限循环请求的直接原因：

• useEffect执行规则：未传入第二个参数时，组件每一次重渲染完成后，都会执行传入的回调逻辑
• 回调中执行setPeople(peopleArray)会更新组件状态，状态变更会直接触发组件重渲染
• 重渲染完成后又会再次触发无依赖的useEffect回调，重新发起接口请求、再次更新状态触发重渲染，形成闭环死循环，持续消耗客户端、服务端资源。

如果需要实现「组件首次加载时仅发起一次初始请求」的需求，只需要给useEffect传入空数组[]作为第二个依赖参数即可，修正后代码如下：

useEffect(() => {
  Axios.post("http://localhost:3005/people", {UUID}).then((response) => {
    const peopleArray = [];
    for (let key in response.data) {
      peopleArray.push({ ...response.data[key] });
    }
    setPeople(peopleArray);
  });
}, []); // 新增空依赖数组

• 空依赖数组[]的作用是告知React，当前effect逻辑不依赖组件内任何响应式变量，仅在组件首次挂载完成后执行一次，后续组件重渲染不会重复触发该逻辑
• 如果后续业务需要在某个变量（比如示例中的UUID）变化时重新拉取数据，只需要将对应变量加入依赖数组即可，例如[UUID]，此时effect仅会在组件首次挂载、依赖项的值发生变化时执行，不会产生无意义的循环请求。

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