I am trying to get the current temperature from openweathermaps using axios. I can put my url into the browser and it works fine. But when I try do an axios call with the correct url it doesnt event call. Here is my code:
function Overview() {const appState = useRef(AppState.currentState);const [count, setCount] = useState(0);const [active, setActive] = useState(false);const [latitude, setLatitude] = useState(0);const [longitude, setLongitude] = useState(0);const [temperature, setTemperature] = useState('');const API_KEY = '{apikey}';const getLocationAsync = async () => { let {status} = await Location.requestForegroundPermissionsAsync(); if (status !== 'granted') { console.log('Location Permission Error') } const loc = await Location.getCurrentPositionAsync({}); setLatitude(loc.coords.latitude); setLongitude(loc.coords.longitude);}const getTemperature = async () => { const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`; const response = await axios.get(encodeURI(url)); const temp = await response.data?.main?.temp; setTemperature(temp);}useEffect(() => { appState.current.match('active') ? setActive(true) : setActive(false) active && setInterval(() => setCount((oldCount) => oldCount + 1), 60000); getLocationAsync(); return () => { clearInterval(); };}, [active]);useEffect(() => {getTemperature()}, [])return (<View style={{margin: 32}}><View style={{marginBottom: 32}}><Text style={{fontSize: 36, fontFamily: 'Roboto_400Regular'}}>Great!</Text><Text style={{fontSize: 16, color: '#878787', fontFamily: 'Roboto_400Regular'}}>Average mood 23%</Text></View><View style={{flexDirection: 'row', justifyContent: 'space-between'}}><OverviewContainer title="Weather" value={temperature ? temperature : "no data"} /><OverviewContainer title="Time on app" value={secondsToHms(count)} /></View></View>);}
Any help as to where im going wrong would be great as I just cant see my error!