React组件使用useState时请求接口出现无限循环该如何解决

问题原因 #

• useEffect缺少第二个依赖数组参数，默认会在每次组件渲染完成后都执行内部回调。
• 回调中发起网络请求，请求成功后调用setData修改组件状态，状态更新会触发组件重新渲染，重新渲染又会再次执行useEffect回调发起新请求，形成无限循环。

修复方案 #

给useEffect添加第二个参数：空数组[]，空依赖数组表示该useEffect仅在组件首次挂载完成后执行1次，不会在后续组件重渲染时重复触发。
同时取消你代码中getData()调用的注释即可，修复后的代码如下：

import "./styles.css";
import instance from "./instance";
import { useEffect, useState } from "react";
export default function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    const getData = async () => {
      try {
        const data = await instance.get("todos/1");
        setData(data.data);
        console.log(data.data);
      } catch (e) {
        console.log(e);
      }
    };
    getData();
  }, []); // 新增空依赖数组
  return <div className="App">data:{data?.title}</div>;
}

如果后续需要根据某个变量的变化重新发起请求，只需要把该变量添加到依赖数组中即可，比如请求参数是userId，就把userId放到依赖数组里，useEffect会仅在userId值发生变化时重新执行回调。

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