Zustand ein verschachteltes Objekt Rendering

Question

Dieses Problem mir eine große Kopfschmerzen geben so dass jede Hilfe

In dieser Komponente willkommen :), ich mache 2 axios Anrufe an verschiedene APIs: eine für freegeoip und eine für Openweathermap. Ich speichere die Daten im currentCity Zustand, der ein Objekt mit 2 Schlüsseln ist, location und weather. Die Idee ist, dass die App Ihren aktuellen Standort erkennt (mit freegeoip) und den Standortnamen und Wetterdaten (mit openweathermap) darstellt.

Ich bin sicher, es speichert den Zustand ordnungsgemäß, wie Konsolenprotokolle bestätigt haben. Ich kann die Standortdaten für den currentCity-Status rendern, aber die Wetterdaten für den currentCity-Status nicht wiedergeben.

renderCurrentCity(city) { 
    console.log('state3:', this.state.currentCity); 
    console.log([city.weather.main]); 
    return(
     <div> 
     <li>{city.location.city}, {city.location.country_name}</li> // Working 
     <li>{city.weather.main.temp}</li>  // Not working 
     </div> 

    ) 
    } 

Die Konsole Fehler erhalte ich:

Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null 

currentCity.location JSON:

{ 
"ip": // hidden, 
"country_code": "FR", 
"country_name": "France", 
"region_code": "GES", 
"region_name": "Grand-Est", 
"city": "Reims", 
"zip_code": "", 
"time_zone": "Europe/Paris", 
"latitude": 49.25, 
"longitude": 4.0333, 
"metro_code": 0 
} 

currentCity.weather JSON:

{ 
"coord": { 
"lon": 4.03, 
"lat": 49.25 
}, 
"weather": [ 
{ 
"id": 800, 
"main": "Clear", 
"description": "clear sky", 
"icon": "01d" 
} 
], 
"base": "stations", 
"main": { 
"temp": 283.15, 
"pressure": 1011, 
"humidity": 43, 
"temp_min": 283.15, 
"temp_max": 283.15 
}, 
"visibility": 10000, 
"wind": { 
"speed": 3.1, 
"deg": 350 
}, 
"clouds": { 
"all": 0 
}, 
"dt": 1493127000, 
"sys": { 
"type": 1, 
"id": 5604, 
"message": 0.1534, 
"country": "FR", 
"sunrise": 1493094714, 
"sunset": 1493146351 
}, 
"id": 2984114, 
"name": "Reims", 
"cod": 200 
} 

Übriges Code:

import React, { Component } from 'react'; 
import axios from 'axios'; 
import WeatherList from './weatherlist'; 
import SearchBar from './searchbar'; 

const API_KEY = '95108d63b7f0cf597d80c6d17c8010e0'; 
const ROOT_URL = 'http://api.openweathermap.org/data/2.5/weather?' 


export default class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     cities: [], 
     errors: '', 
     currentCity: { 
     location: {}, 
     weather: {} 
     } 
    }; 
    this.currentCity(); 
    this.renderCurrentCity = this.renderCurrentCity.bind(this); 
    } 

    citySearch(city) { 

    const url = `${ROOT_URL}&appid=${API_KEY}&q=${city}`; 

    axios.get(url) 
    .then(response => { 

     const citiesArr = this.state.cities.slice(); 
     this.setState({ 
     cities: [response.data, ...citiesArr], 
     errors: null 
     }); 
    }) 
    .catch(error => { 
     this.setState({ 
     errors: 'City not found' 
     }) 
    }) 
    } 

    currentCity() { 
    var city; 
    var country; 

    axios.get('http://freegeoip.net/json/') 
    .then(response => { 
     const lat = response.data.latitude; 
     const lon = response.data.longitude; 
     city = response.data.city; 
     country = response.data.country_name; 

     const url = `${ROOT_URL}&appid=${API_KEY}&lat=${lat}&lon=${lon}`; 

     const state = this.state.currentCity; 
     console.log('state1:',state); 
     this.setState({ 
     currentCity: { ...state, location: response.data } 
     }); 
     console.log(url); 
     axios.get(url) 
     .then(city => { 

     const state = this.state.currentCity; 
     console.log('state2:', state); 
     this.setState({ 
      currentCity: { ...state, weather: city.data } 
     }); 
     }) 
    }) 
    } 

    renderCurrentCity(city) { 
    console.log('state3:', this.state.currentCity); 
    console.log([city.weather.main]); 
    return(
     <div> 
     <li>{city.location.city}, {city.location.country_name}</li> 
     <li>{city.weather.main.temp}</li> 
     </div> 

    ) 
    } 

    render() { 
    return (
     <div className={this.state.cities == false ? 'search': 'search-up'}> 
     <h1>What's the weather today?</h1> 
     <ul className='list-unstyled text-center'> 
      {this.renderCurrentCity(this.state.currentCity)} 
     </ul> 
     <SearchBar 
      onSearchSubmit={this.citySearch.bind(this)} 
      errors={this.state.errors} /> 
     {this.state.cities == false ? null : <WeatherList cities={this.state.cities} />} 
     </div> 
    ) 
    } 
} 

Answer 1

Sie Ihren ganzen Staat verbreitet, wenn Ihr die Daten Wetter erhalten:

this.setState({ 
    currentCity: { ...state, weather: city.data } 
}); 

es sein sollte:

this.setState({ 
    currentCity: { ...state.currentCity, weather: city.data } 
});