渲染嵌套对象状态

Question

这个问题是给了我一个巨大的头痛所以任何帮助都是欢迎的。

在这个部分，我做2个Axios公司调用不同的API：一个用于freegeoip，一个用于openweathermap。我将数据存储在currentCity状态，这是一个带有2个密钥的对象，location和weather。这个想法是，应用程序检测您的当前位置（使用freegeoip）并呈现位置名称和天气数据（使用openweathermap）。

我很积极，它正在控制台日志已确认正确存储状态。我可以呈现currentCity状态的位置数据，但似乎无法呈现currentCity状态的天气数据。

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> 

    ) 
    } 

控制台的错误，我得到：

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 
} 

休息的代码：

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

您正在蔓延你的整个状态，当你接收到的气象资料：

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

它应该是：

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