React中使用Axios发送Get请求时useEffect出现无限循环如何解决？

你出现无限循环的核心原因是依赖数组的位置传错了：
你代码里的[]是作为axios.get().then()的第二个参数（对应请求成功的错误回调位置），根本没有传递给useEffect作为第二个参数。
useEffect如果没有传入依赖数组，会在每次组件渲染完成后都执行：你在useEffect内部调用setData修改状态，状态更新触发组件重渲染，重渲染后又再次执行useEffect，就形成了无限循环。

• 第一步：将空数组[]移动到useEffect回调函数的闭合大括号外侧，作为useEffect的第二个参数。
• 第二步：优化不必要的变量定义，避免重复生成引用：
  将固定不变的请求前缀queryURL移动到组件外部定义，避免每次组件渲染都重新创建新的字符串引用；
  把仅在useEffect内部使用的country变量移到回调内部定义，避免污染组件顶层作用域。

import React, {useEffect, useState} from 'react';
import axios from 'axios';
import { getCookie } from '../utils/util';

// 固定常量移到组件外，仅初始化一次
const queryURL = `https://restcountries.eu/rest/v2/name/`;

const Details = () => {
    const [data, setData] = useState(null);

    // 依赖数组正确传递给useEffect
    useEffect(() => {
        const country = getCookie('title');
        console.log(country);
        axios.get(queryURL + country).then((res) => {
            setData(res.data);
        });
    }, []); 

    return (
        <>
            details
        </>
    )
}

export default Details;

如果你的ESLint开启了react-hooks/exhaustive-deps规则，可能会提示你将queryURL、getCookie加入依赖数组，直接添加即可：这两个都是引入的固定值/纯函数，不会发生变化，加入后也不会触发useEffect重复执行。
如果后续需要在country值变化时重新发起请求，可以把country用useState存储后加入依赖数组即可。

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