async axios get call axios returns nothing-CodePudding

I'm 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 the relevant code section:

function Overview() {
  const [temperature, setTemperature] = useState('')
  const API_KEY = '{apikey}'

  const getTemperature = useCallback(async () => {
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude.toFixed(2)}&lon=${longitude.toFixed(
      2,
    )}&appid=${API_KEY}`

    console.log('my provided url is set to:', url)

    const response = await axios.get(url)
    if (response.data) {
      setTemperature(response.data.main.temp)
    }
  }, [latitude, longitude])

  useEffect(() => {
    getTemperature().catch(console.error)
  }, [getTemperature])

  return <>{temperature ? temperature : 'no data'}</>
}

Any help as to where I'm going wrong would be great as I just cant see my error!

CodePudding user response：

Your URL working on the browser showcases that your API key is correct. Now, make sure the variables in your URL are properly set from the code, particularly the API key. you can console.log them to be sure. Passed that, the minimal code below would do.

import {useCallback, useEffect} from 'react';
import axios from 'axios';

function Overview() {

// YOUR_INITIAL_STATE rather be undefined 
const [temperature, setTemperature] = useState(YOUR_INITIAL_STATE);

const API_KEY = 'YOUR_API_KEY';

const getTemperature = useCallback(async () => {
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`;

   console.log("my provided url is set to:", url);

    const response = await axios.get(url);
    if(response.data){
      setTemperature(response.data.main.temp);
    }
// only call the functtion when these deps change
}, [latitude, longitude])

useEffect(() => {
// Check the error for further debbugging
getTemperature()
.catch(console.error);

}, [getTemperature])

      return (
            <>
          {temperature ? temperature : "no data"} 
            </>
        );
}

CodePudding user response：

It looks like your arrow function is calling itself recursively:

const setTemperature = async () => {
    const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`);
    setTemperature(response.data.main.temp);
};

Your code doesn't show where this is being called. Probably it needs to be something like:

const setTemperature = async () => {
    const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`);
    return response.data.main.temp;
};

Perhaps it just needs to be a one letter change:

const getTemperature = async () => {
    const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`);
    setTemperature(response.data.main.temp);
};

Credit to @devklick