如何拉取嵌套状态对象而不将其作为"undefined"返回

Question

我继续为我认为简单的事情而奋斗。我第一次尝试时使用了React Hooks，但这次我切换回基于类的组件，只是因为我认为它会因为某种原因而改变一些东西。

import React, { Component } from 'react'
import Search from './components/layout/Search'
import axios from 'axios'
class App extends Component {
state = {
weather: {},
loading: false
}


sendUp = async (state) => {
this.setState({loading: true});
const res = await axios.get(`http://api.openweathermap.org/data/2.5/weather?q=${state}&appid={api key hidden for post.}`)
this.setState({weather: res.data})
this.setState({loading: false})
}
render() {
return (
<React.Fragment>
<div className="container">
<Search sendUp={this.sendUp} />
<h1>Testing this stuff {this.state.weather.coord.lat} </h1>
</div>
</React.Fragment>
)
}
}
export default App

希望我的困惑是有道理的。我以为它会像这样简单地提取日期：{this.state.wweather.coord.lat}。然而，我得到了这个错误。无法读取未定义的属性"lat"。我只是错过了一些基本的javascript基础，还是在使用React库时调用嵌套对象有所不同？

{
"weather": {
"coord": "{lat: 32.88, lon: -111.76}",
"weather": "[{…}]",
"base": "stations",
"main": "{feels_like: 311.12, humidity: 32, pressure: 1012, …}",
"visibility": 10000,
"wind": "{deg: 330, speed: 3.6}",
"clouds": "{all: 1}",
"dt": 1595714117,
"sys": "{country: "US", id: 3616, sunrise: 1595680572, suns…}",
"timezone": -25200,
"id": 5288636,
"name": "Casa Grande",
"cod": 200
},
"loading": false
}

Answer 1

Ciao，因为this.state.weather包含一个名为weather的元素，所以您没有定义，所以如果您想访问您的对象，您必须编写this.state.weather.weather。但还有另一个问题：如果你想从coord中获得lat，你就不能写this.state.weather.weather.coord.lat，因为this.state.weather.weather.coord是一个字符串，而不是JSON对象。并且不能像JSON.parse(this.state.weather.weather.coord)那样做任何事情，因为它不是一个有效的JSON。因此，我们必须使用字符串，最后，要从coord中获得lat，您可以执行以下操作：

this.state.weather.weather.coord.split(',')[0].split(':')[1]

Answer 2

render函数在组件安装之初执行。每当您的状态发生变化时，render函数将再次执行。在其他情况下，组件可能会进行渲染(例如，道具更改(。

第一次渲染组件时，您的状态为

state = {
weather: {},
loading: false
}

但在render函数中，您执行

<h1>Testing this stuff {this.state.weather.coord.lat} </h1>

这是因为在这一点上，您还没有加载weather信息。您的render组件应该考虑到这一点。例如，你可以做一些类似的事情

{ this.state.weather.coord ? <h1>Testing this stuff {this.state.weather.coord.lat}</h1> : <h1>Loading weather data...</h1>}

这样，在加载天气数据之前，您会看到文本"；正在加载&"；。你也可以做一些更复杂的事情，比如展示一个旋转器。