Reactjs 呈现嵌套对象状态

这个问题让我非常头疼，欢迎任何帮助：）

在这个组件中，我对不同的API进行了两个axios调用：一个用于freegeoip，一个用于openweathermap。我将数据存储在

currentCity

状态，这是一个具有两个键的对象，

location

和

weather

。其想法是，该应用程序检测您的当前位置（使用freegeoip），并呈现位置名称和天气数据（使用openweathermap）

我敢肯定，正如控制台日志所确认的，它正在正确地存储状态。我可以为currentCity state渲染位置数据，但似乎无法为currentCity state渲染天气数据

  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>

    )
  }

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

import React，{Component}来自'React'；
从“axios”导入axios；
从“./WeatherList”导入天气列表；
从“./SearchBar”导入搜索栏；
常量API_键='95108d63b7f0cf597d80c6d17c8010e0'；
const ROOT_URL='1〕http://api.openweathermap.org/data/2.5/weather?'
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
城市：[]，
错误：“”，
当前城市：{
地点：{}，
天气：{}
}
};
这个.currentCity（）；
this.renderCurrentCity=this.renderCurrentCity.bind（this）；
}
城市研究（城市）{
consturl=`${ROOT\uurl}&appid=${API\ukey}&q=${city}`；
获取（url）
。然后（响应=>{
const citiesar=this.state.cities.slice（）；
这是我的国家({
城市：[response.data，…citiesar]，
错误：null
});
})
.catch（错误=>{
这是我的国家({
错误：“未找到城市”
})
})
}
当前城市（）{
瓦尔市；
var国家；
axios.get（）http://freegeoip.net/json/')
。然后（响应=>{
const lat=response.data.latitude；
const lon=response.data.longitude；
城市=response.data.city；
country=response.data.country\u name；
const url=`${ROOT\u url}&appid=${API\u KEY}&lat=${lat}&lon=${lon}`；
const state=this.state.currentCity；
log（'state1:'，state）；
这是我的国家({
currentCity:{…状态，位置：response.data}
});
console.log（url）；
获取（url）
.然后（城市=>{
const state=this.state.currentCity；
log（'state2:'，state）；
这是我的国家({
当前城市：{…状态，天气：city.data}
});
})
})
}
renderCurrentCity（城市）{
console.log（'state3:'，this.state.currentCity）；
console.log（[city.weather.main]）；
返回(
{city.location.city}，{city.location.country_name}
{城市天气主温度}
)
}
render（）{
返回(
今天天气怎么样？

{this.renderCurrentCity（this.state.currentCity）}

{this.state.cities==false？null:}
)
}
}

当您收到天气数据时，您正在传播您的整个州：

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

应该是：

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

---

当您收到天气数据时，您正在传播您的整个州：

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

应该是：

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

---

仍然不工作。。。另外，我声明

const state=this.state.currentCity在添加天气数据之前，确保我只传播当前城市状态，但仍然不起作用。。。另外，我声明
const state=this.state.currentCity在添加天气数据之前，确保我只传播当前城市状态。请共享来自
renderCurrentCity
的console.log输出，我该怎么做？我只能获取整个控制台的输出请共享
renderCurrentCity
中的console.log输出，我该怎么做？我只能得到整个控制台的输出