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

IT技术 javascript reactjs api axios
2022-07-06 02:20:05

当我使用 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;
1个回答

您需要在callback函数之后放置空数组(依赖项):

改成:

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