发出 axios get 请求时出现无限循环

Question

当我使用 Axios 向 api 发出 get 请求时，我在 useEffect 挂钩中遇到无限循环，并且我确信添加第二个选项“[]”会告诉它只运行一次。有什么我遗漏或忽视的吗？console.log 向我显示它正在无限循环。

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




const Details = () => {

    const [data, setData] = useState(null);
    let country;    
    const queryURL = `https://restcountries.eu/rest/v2/name/`;

    useEffect(() => {
        country = getCookie('title');
        console.log(country);
        axios.get(queryURL + country).then((res) => {
            setData(res.data);
        }, []);

    })

    return (
        <>
            details
        </>
    )
}

export default Details;

Answer 1

您需要在callback函数后面放置空数组（依赖项）：

改成：

useEffect(() => {
  country = getCookie("title");
  console.log(country);
  axios.get(queryURL + country).then((res) => {
    setData(res.data);
  });
}, []);