[英]React child renders before parent
I am making a WeatherApp for freecodecamp. 我正在为freecodecamp制作WeatherApp。 I have made a parent class for getting the geolocation and then pass the value of coordinates to Fetch.js, the problem is when i run the program the console shows that Fetch is likely being executed first,
我已经创建了一个用于获取地理位置的父类,然后将坐标值传递给Fetch.js,问题是当我运行程序时,控制台显示Fetch可能首先被执行,
ie, on the console , First the data shows an empty object for Fetch.js and then the console shows the geolocation i printed in Geolocation.js 即,在控制台上,首先数据显示Fetch.js的空对象,然后控制台显示我在Geolocation.js中打印的地理位置
Parent Class : 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;
Fetch.js : Fetch.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;
You can conditionally render Fetch
by checking if the coordinates are already in the state: 您可以通过检查坐标是否已处于状态来有条件地渲染
Fetch
:
<div>
{ this.state.lon && this.state.lat && <Fetch lon={this.state.lon} lat={this.state.lat} /> }
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.