Const [isLoading, setLoading] = useState(false) const [isData, setData] =

Question

Const [isLoading, setLoading] = useState(false) const [isData, setData] =

useState(data)
const [burger, setBurger] = useState(true)
const [address, setAddres] = useState<string>('')
const [cords, setCords] = useState({ lat: 45.035667, lng: 38.976389 })

const handleMaps = useCallback(async () => {
if (isData) {
const { data } = await axios.post(https://nominatim.openstreetmap.org/search?format=json&q=${address})
setCords({ ...cords, lat: data[0].lat, lng: data[0].lon })
}
}, [address, cords, isData])

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

Почему useEffect вызывает бесконечно функцию?

#frontend #javascript #programming #react.js #russian

0

07.06.2020

4 ответов

20 просмотров

Ivan 🧑‍🚀

У тебя useCallback зависит от cords и меняет их же. То есть код, который меняет cords, выполняется, когда меняется cords. Чтобы этого избежать, убери из зависимостей cords, а в setCords используй коллбэк

0

07.06.2020

Ivan 🧑‍🚀

setCords(c => ({ ...c, lat: data[0].lat, lng: data[0].lon }))

0

07.06.2020

Ivan 🧑‍🚀

А вообще, зачем тебе спредить старое значение, если ты устанавливаешь все поля из запрошенных данных? setCords({ lat: data[0].lat, lng: data[0].lon })

0

07.06.2020

Gagik Harutyunyan · Accepted Answer

Gagik Harutyunyan

потому что рекурсия. В зависимостях указал, что при изменении handleMaps вызови handleMaps... Вот он и вызывает и бесконечно попадает в useEffect. Убери handleMaps из зависимостей

0

07.06.2020

169 похожих чатов

Const [isLoading, setLoading] = useState(false) const [isData, setData] =

4 ответов

Похожие вопросы