在父项之前反应子项呈现

Question

我正在为 freecodecamp 制作一个 WeatherApp。我已经创建了一个父级 class 用于获取地理位置，然后将坐标值传递给 Fetch.js，问题是当我运行程序时控制台显示 Fetch 可能首先被执行,

即，在控制台上，首先数据显示 Fetch.js 的空对象，然后控制台显示我在 Geolocation.js

中打印的地理位置

父级 Class : 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 :

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;

Answer 1

您可以通过检查坐标是否已经处于以下状态来有条件地呈现 Fetch：

<div>
  { this.state.lon && this.state.lat && <Fetch lon={this.state.lon} lat={this.state.lat} /> }
</div>

在父项之前反应子项呈现

React child renders before parent

javascript

reactjs

react-lifecycle