React this.state is null - reactjs

Question

I try to do weather app in react, but when I add ${this.state.latitude} in my const API I replaced null.
But when I try display this.state.latitude in render() I have a value.
What is wrong?
export class TodayWeather extends React.Component {
constructor(props) {
super(props);
this.state = {
latitude: "",
longitude: "",
};
}
getMyLocation =() => {
const location = navigator.geolocation;
if (location) {
location.getCurrentPosition((position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
})
},)}
};
getWeather = () => {
this.getMyLocation();
const API = `http://api.openweathermap.org/data/2.5/forecast?lat=${this.state.latitude}&lon=139&appid=${apiKey}`;
fetch(API)
.then(response => {
if (response.ok) {
return response
}
throw Error("")
})
.then(response => response.json())
.then(data => {
const time = new Date().toLocaleString();
this.setState({
})
})})
};
componentDidMount() {
this.getWeather();
}
render(){
return (
<div className="App">
<Result className="result" weather={this.state}/>
<p> {this.state.latitude} </p>
</div>
);
}
}

Answer 1

The expected order of execution is:
this.getMyLocation() which sets the latitude and longitude to state.
this.getWeather() which uses the state variable to make a xhr request (which is again async).
this.setState is also asynchronous. So by the time the state variables are set, this.getWeather() already starts executing, so it comes back null and the fetch request fails. So when the state variable is set, it triggers a rerender, which is why it does come in the render.
The solution to this is using a callback in the setState. I have made some minor modifications.
I called this.getMyLocation() on componentDidMount:
componentDidMount() {
this.getMyLocation();
}
In which I make use of the callback and invoke the modified this.getWeather:
this.setState(
{
latitude: position.coords.latitude,
longitude: position.coords.longitude
},
this.getWeather
);
Where it no longer invokes this.getMyLocation() at its start.
Besides this, one obvious flaw is that you are not passing anything to the setState after the fetch is done, presumably the json data you obtain.
.then((data) => {
const time = new Date().toLocaleString();
this.setState({
// Something needs to come here, possibly:
data
});
});
The full code:
export default class TodayWeather extends Component {
constructor(props) {
super(props);
this.state = {
latitude: '',
longitude: ''
};
}
getMyLocation = () => {
const location = navigator.geolocation;
if (location) {
location.getCurrentPosition((position) => {
this.setState(
{
latitude: position.coords.latitude,
longitude: position.coords.longitude
},
this.getWeather
);
});
}
};
getWeather = () => {
const API = `http://api.openweathermap.org/data/2.5/forecast?lat=${
this.state.latitude
}&lon=139&appid=${apiKey}`;
fetch(API)
.then((response) => {
if (response.ok) {
return response;
}
throw Error('');
})
.then((response) => response.json())
.then((data) => {
const time = new Date().toLocaleString();
this.setState({
// Something needs to come here
data
});
});
};
componentDidMount() {
this.getMyLocation();
}
render() {
return (
<div className="App">
<Result className="result" weather={this.state} />
<p> {this.state.latitude} </p>
</div>
);
}
}

Answer 2

try this.. but the code looks very messy
export default class TodayWeather extends React.Component {
constructor(props) {
super(props);
this.state = {
latitude: '',
longitude: ''
};
}
getMyLocation = (getData) => {
const location = navigator.geolocation;
if (location) {
location.getCurrentPosition((position) => {
getData(position);
});
}
};
getWeather = () => {
const getData = (position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude
});
const API = `http://api.openweathermap.org/data/2.5/forecast?lat=${
position.coords.latitude
}&lon=139&appid=${apiKey}`;
fetch(API)
.then((response) => {
if (response.ok) {
return response;
}
throw Error('');
})
.then((response) => response.json())
.then((data) => {
const time = new Date().toLocaleString();
this.setState({ time });
});
};
this.getMyLocation(getData);
};
componentDidMount() {
this.getWeather();
}
render() {
return (
<div className="App">
<Result className="result" weather={this.state} />
<p> {this.state.latitude} </p>
</div>
);
}
}