Why is my React fetch weather API so buggy/temperamental? - reactjs

Question

I'm trying to fetch weather API after setting input onChange and button onClick. It kept returning undefined when I tried to .then (data => {setWeather(data)})
So I applied a solution from a youtube tutorial that uses a conditional operator to display component that goes as below in my App.
This basically worked, but it's so buggy and sensitive that even if I just add a className for some css in WeatherDisplay.jsx it crashes and starts returning undefined, much less any of the other things I need to do to it to get it looking right.
Would be grateful if anyone could tell me why, or even better provide a better alternative?
Edit: It now just no longer works at all and continues to return undefined even when I've reverted it to the code that was working
function handleClick(query) {
fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${query}&units=${unit}&appid=${apiKey}`,
)
.then((response) => response.json())
.then((data) => {
setWeather(data);
console.log(data);
});
setWeatherReturn({
type: weather.weather[0].description,
temp: weather.main.temp,
image: weather.weather[0].icon,
});
}
{
typeof weather.main != "undefined" ? (
<WeatherDisplay
weatherType={weatherReturn.type}
weatherTemp={weatherReturn.temp + "°C"}
weatherImg={`http://openweathermap.org/img/wn/${weatherReturn.image}#2x.png`}
/>
) : (
""
);
}

Answer 1

It looks like you're using setWeatherReturn to process the weather data outside the then chain, so it's likely never loaded at that point.
The simple fix is just moving the setWeatherReturn within that callback:
function handleClick(query) {
fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${query}&units=${unit}&appid=${apiKey}`,
)
.then((response) => response.json())
.then((data) => {
setWeather(data);
setWeatherReturn({
type: data.weather[0].description,
temp: data.main.temp,
image: data.weather[0].icon,
});
});
}
Either way, you shouldn't use state for data derived from state (your weatherReturn), since it's then very easy to have that derived data be out of sync with the state it's derived from (e.g. you call setWeather and forget to call setWeatherReturn); instead use useMemo.
With that in mind, a simple stand-alone component that loads weather information and formats it might look like this.
The idea is that useEffect is automatically triggered when the query or unit changes, and the useMemo similarly when the raw data gets loaded.
If the data isn't yet loaded, the useMemo callback will return undefined, so the component itself just says "loading".
const apiKey = '...';
function WeatherLoader({ query, unit }) {
const [data, setData] = React.useState(null);
React.useEffect(() => {
fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${query}&units=${unit}&appid=${apiKey}`,
)
.then((response) => response.json())
.then(setData);
}, [query, unit]);
const formattedWeatherData = React.useMemo(() => {
if (!data) return undefined;
return {
type: weather.weather[0].description,
temp: weather.main.temp,
image: weather.weather[0].icon,
};
}, [data]);
if (!formattedWeatherData) return <>Loading...</>;
const { type, temp, image } = formattedWeatherData;
return (
<WeatherDisplay
weatherType={type}
weatherTemp={`${weatherReturn.temp}°C`}
weatherImg={`http://openweathermap.org/img/wn/${image}#2x.png`}
/>
);
}
You would use this e.g.
<WeatherLoader query="New York" unit="C" />
(or whatever unit takes as a value).