我正在为 freecodecamp 制作一个 WeatherApp。我已经创建了一个父类来获取地理位置,然后将坐标值传递给 Fetch.js,问题是当我运行程序时,控制台显示 Fetch 可能首先被执行,
即,在控制台上,首先数据显示 Fetch.js 的空对象,然后控制台显示我在 Geolocation.js 中打印的地理位置
父类:Geolocation.js
import React from 'react';
import Fetch from './Fetch';
class GeoLocation extends React.Component {
constructor(props) {
super(props);
this.state={
lon : null,
lat : null
};
this.showPosition = this.showPosition.bind(this);
}
componentDidMount(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(this.showPosition);
} else {
console.log("Geolocation is not supported by this browser.");
}
}
showPosition(position) {
this.setState({lon:position.coords.latitude,lat:position.coords.longitude})
console.log(this.state);
}
render(){
return (
<div>
<Fetch lon={this.state.lon} lat={this.state.lat} />
</div>
)
}
}
export default GeoLocation;
获取.js:
import React from 'react';
import LocalWeather from './LocalWeather';
import Icon from './Icon';
class Fetch extends React.Component{
constructor(props){
super(props);
this.state = {};
this.selectHandler = this.selectHandler.bind(this);
this.setStateAsync = this.setStateAsync.bind(this);
}
setStateAsync(){
return new Promise((resolve)=>{
this.setState(this.state,resolve)
})
}
async componentDidMount(){
console.log(this.props.lat);
if(this.props.lat && this.props.lon){
const res = await fetch(`https://fcc-weather-api.glitch.me/api/current?lat=${this.props.lat}&lon=${this.props.lon}`);
const {data} = await res.json();
const temp = data.main['temp'] ;
const icon = data.weather[0].icon ;
await this.setStateAsync({temp:temp,icon:icon});
console.log(data);
}
else {
this.setStateAsync({temp:'',icon:''});
console.log('nothing');
}
}
selectHandler(temp){
this.setState({temp:temp})
}
render(){
return(
<div>
<LocalWeather temp={this.state.temp} on_click={this.selectHandler} />
<Icon src={this.state.icon ? this.state.icon : ''} />
</div>
)
}
}
export default Fetch;