Правильно ли так менять состояние асинхронно?

Question

[Luke LikeSkywalker]

У меня код запрашивает данные с API. Я пытаюсь изменить состояние с помощью react hooks и useEffect()
Проблема в том что он повторяет запрос на сервер постоянно не переставая. Мой. API key уже забанили

let [weatherData, setWeatherData] = useState({})

    let fetchWeatherData = async() => {
        let url = `https://api.openweathermap.org/data/2.5/forecast?q=Chicago&APPID=${process.env.APIKey}&cnt=5`
        let response = await fetch(url);
        let data = await response.json()
        await setWeatherData(data)
    }

    useEffect(()=>{
        fetchWeatherData()
    })

Answer 1

[dpws]

Если вы хотите запустить эффект только один раз (при монтировании), вы можете передать пустой массив [] в качестве второго аргумента.

let [weatherData, setWeatherData] = useState({})

    let fetchWeatherData = async() => {
        let url = `https://api.openweathermap.org/data/2.5/forecast?q=Chicago&APPID=${process.env.APIKey}&cnt=5`
        let response = await fetch(url);
        let data = await response.json()
        await setWeatherData(data)
    }

    useEffect(()=>{
        fetchWeatherData()
    }, [])

Документация

Comments

[Luke LikeSkywalker]

Спасибо. Значит это из-за того что при обновлении State компонент перерендеривается и снова запускает обновление State и все по кругу?

[dpws]

oolooq, именно

[Luke LikeSkywalker]

oolooq, Но все равно weatherData пустой

[dpws]

oolooq, Это уже смотрите, что приходит в response