Question

我有一个父组件，它使用openweathermap api获取一个地方的天气，它有一个子组件正在获取当前位置。现在我想要的是，一旦在子组件中获取了当前位置，我想将该数据发送到我的父组件，该组件何时将获取该特定城市的天气。目前，他们正在单独工作，但是我无法将详细信息从一个组件传递到另一个组件。

PS，我正在尝试不使用Redux。

这是代码，用于子代（标头组件）

componentDidMount(){
  this.displayData();
}
displayData = async () =>{
  try{
    navigator.geolocation.getCurrentPosition(
    (position) => {
      this.setState({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        status_location:true,
        error: null,
        currentCity: null,
      });
    this.geoCall(this.state.latitude,this.state.longitude)
  },
  (error) =>{
    alert("Not_Agree_Share_Loaction")
  });
  }
  catch(error)
  {
  alert("Server error");
  }}

  geoCall = async (lat,lon) => {
    Geocoder.init('xxx-xxx-xxx'); 
    Geocoder.from(lat, lon)
    .then(json => {
            var addressComponent = json.results[0].address_components[2].long_name;
            var countryFound = json.results[1].address_components[6].long_name;
            this.setState({
              currentCity:addressComponent,
              currentCountry: countryFound
            });
            //alert(this.state.currentCountry);
    })
    .catch(error => alert(error));
  }

这是父母的代码

  componentDidMount(){
    return fetch(`http://api.openweathermap.org/data/2.5/weather?q=${this.state.currentCity},${this.state.currentCountry}&appid=${this.state.weatherKey}`)
      .then((response) => response.json())
      .then((responseJson) => {
        var currenttemp = JSON.stringify(responseJson.main.temp);
        var windspeed = JSON.stringify(responseJson.wind.speed);
        var humin = JSON.stringify(responseJson.main.humidity);
        var lati = JSON.stringify(responseJson.coord.lat);
        var longi  = JSON.stringify(responseJson.coord.lon);
        this.setState({
          temprature:currenttemp,
          wind: windspeed,
          humidity:humin,
          latitudes: lati,
          longitudes: longi,
        })
      })
      .catch((error) =>{
        alert(error);
      });
  }

  displayData = async () =>{
    try{
      navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          status_location:true,
          error: null,
          currentCity: null,
        });


      this.geoCall(this.state.latitude,this.state.longitude)
    },
    (error) =>{
      alert("Not_Agree_Share_Loaction")
    });
    }
    catch(error)
    {
    alert("Server error");
    }}

在父母中，我想从标题部分获取城市和国家/地区。

从react js传递有关天气和当前位置的信息

0 个答案: