React - API fetches - 2nd fetch uses data from 1st fetch? - reactjs

Question

I'm new to programming and have been learning React for a few weeks. I decided to create a weather app to practice what I've learned so far.
I created a Button.js file, where I can enter a zip code. The zip code is then used to setZip in Weather.js.
I am using the zip to fetch lat/long, which I would like to use (the lat/long) in another fetch. But when the 2nd fetch runs, it uses the previous lat/long, not the newly set lat/long.
For example:
If I enter 10001, the app uses lat/long from 90210 (which is what state started with). Then if I enter 99501, the app uses the lat/long from 10001.
It's like the 2nd fetch is always one step behind.
But even the console.log I have right below the 1st fetch shows the previous lat/long.
Thank you for your help.
Weather.js
import React, {useState, useEffect} from "react"
import Button from "./Button"
function Weather() {
const [loading, setLoading] = useState(false)
const [maxTemp, setMaxTemp] = useState([])
const [lat, setLat] = useState("34")
const [long, setLong] = useState("-118")
const [zip, setZip] = useState("90210")
useEffect(()=>{
setLoading(true)
fetch("https://api.openweathermap.org/geo/1.0/zip?zip="+ zip +",US&appid={api}")
.then(res => res.json())
.then((result) => {
setLat(result.lat)
setLong(result.lon)
console.log(lat)
console.log(long)
console.log(zip)
console.log(result)
return fetch("https://api.openweathermap.org/data/2.5/onecall?lat="+ lat +"&lon="+ long +"&units=imperial&exclude=current,minutely,hourly,alerts&appid={api}")
})
.then(res => res.json())
.then((data) => {
setLoading(false)
setMaxTemp(data.daily[0].temp.max)
console.log(lat)
console.log(long)
console.log(data)
})
}, [zip])
if(loading === true){
return <div>Loading...</div>
} else return(
<div>
<Button zip={setZip} /> <br />
High: {Math.round(maxTemp)}
</div>
)
}
export default Weather
Button.js
import React, {useState} from "react"
function Button(props) {
const [zip, setZip] = useState([])
const handleSubmit = (event) => {
console.log(zip)
props.zip(`${zip}`)
event.preventDefault();
}
return(
<div>
<input placeholder="Zip Code" type="number" min="0" max="99999" value={zip} onChange={(e) => setZip(e.target.value)} />
<br />
<button onClick={handleSubmit}>Submit</button>
</div>
)
}
export default Button

Answer 1

As the state is being set and immediately available, you'll need to use the value returned from the first API call.
import React, {useState, useEffect} from "react"
import Button from "./Button"
function Weather() {
const [loading, setLoading] = useState(false)
const [maxTemp, setMaxTemp] = useState([])
const [lat, setLat] = useState("34")
const [long, setLong] = useState("-118")
const [zip, setZip] = useState("90210")
useEffect(() => {
setLoading(true)
fetch("https://api.openweathermap.org/geo/1.0/zip?zip=" + zip + ",US&appid={api}")
.then(res => res.json())
.then(result => {
const {lat, lon} = result;
setLat(lat)
setLong(lon)
console.log(lat)
console.log(long)
console.log(zip)
console.log(result)
return fetch("https://api.openweathermap.org/data/2.5/onecall?lat=" + lat + "&lon=" + long + "&units=imperial&exclude=current,minutely,hourly,alerts&appid={api}")
})
.then(res => res.json())
.then((data) => {
setLoading(false)
setMaxTemp(data.daily[0].temp.max)
console.log(lat)
console.log(long)
console.log(data)
})
}, [zip])
if (loading === true) {
return <div>Loading...</div>
} else return (
<div>
<Button zip={setZip}/> <br/>
High: {Math.round(maxTemp)}
</div>
)
}
export default Weather
If you want to use the updated state, you'll need to do that in a separate useEffect hook with lat and long in the dependency array.