渲染嵌套對象狀態

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 } 
});