Javascript 在reactjs中呈现嵌套对象

我很难在reactjs页面上呈现嵌套对象

import React, { Component } from "react";
import Toolpanel from "./Todopanel";
import Toollist from "./Toollist";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      city: "Auckland",
      cityWeather: {}
    };
    this.updateUser = this.updateUser.bind(this);
  }

  updateUser(entry) {
    console.log(entry);
    let item = {
      text: entry,
      key: Date.now()
    };
    this.setState(prevstate => {
      return {
        users: prevstate.users.concat(item)
      };
    });
  }

  componentDidMount() {
    let apiId = "***************************";
    let city = this.state.city;
    let ApiString =
      "http://api.openweathermap.org/data/2.5/weather?q=" +
      city +
      "&APPID=" +
      apiId;
    fetch(ApiString)
      .then(results => results.json())
      .then(data => this.setState({ cityWeather: data }));
  }

  render() {
    let test = this.state.cityWeather;

    return (
      <div>
        <Toolpanel parentUpdate={this.updateUser} />

        <div>wind speed : {test.wind.speed} </div>
      </div>
    );
  }
}

export default App;

---

我正在尝试将风速从JSON呈现到我的页面。。但是给我一条错误消息说“TypeError:Cannotreadproperty'speed'of undefined”…请帮助。我对ReactJs相当陌生。

您访问属性的速度太快了，因为

fetch

是一个异步调用。这将需要一些时间，但您的

渲染

在此之前已经启动了

像这样使用它

{ test && <div>wind speed : {test.wind.speed} </div>}

{test&&wind speed:{test.wind.speed}

最初，您的测试将为空，因为您没有从API收到任何响应，因此您应该在使用它之前检查变量是否存在。因此，在像这样使用它之前，只需检查它是否存在：

render() {
    let test = this.state.cityWeather;

    return (
      <div>
        <Toolpanel parentUpdate={this.updateUser} />

        <div>wind speed : {test && test.wind && test.wind.speed ? test.wind.speed : ''} </div>
      </div>
    );
  }

render（）{
设test=this.state.cityWeather；
返回(
风速：{test&&test.wind&&test.wind.speed？test.wind.speed:''}
);
}

你的处理方式没有错。出现的错误是因为正在执行的获取需要一些时间，并且在没有填充数据的情况下首先执行渲染

因此，它第一次在渲染方法中获得

test={}

的值。所以

test.wind.speed

会抛出一个错误

相反，在执行调用之前，显示某种加载状态或简单地

返回null

：

render() {
    let test = this.state.cityWeather;
    if (!test) {
        return 'Loading...';
    }

    ....
} 

---

由于您没有发布

ToolPanel

组件实现，我可能错了（我缺少一些信息）。但是，我也非常确定您的问题不是加载

变量

基本上，第一次调用
render（）
方法时，您将
this.state.cityWeather
设置为空对象
{}
；这是因为您在
componentDidMount（）
中获取数据。因此，第一次调用
render（）
时，如果
this.state.cityWeather
为空，则无法访问
this.state.cityWeather.wind.speed
，因为
this.state.cityWeather
中没有属性
wind

因此，通常，执行此操作的常用方法是在状态中添加属性
加载
，并在
构造函数中将其设置为
true
。然后，在提取的回调中，当您在
this.state.cityWeather
中设置数据时，您还将
load
设置为
true


最后，在
render（）
方法中，您编写了一个条件呈现：如果
this.state.load===true
，那么您可以打印一个简单的段落，如
我正在检索信息
 
，否则，如果
this.state.loading==false
，则可以呈现所需内容。
如果查看代码，以下是事件顺序：

创建组件，即调用
构造函数
安装组件，即调用
componentDidMount
componentDidMount
启动一个
async
请求来获取数据，然后解析数据并将其设置为状态
render
方法尝试从状态读取数据
现在，由于#3中的请求是异步的，因此在第一次调用
render
方法时，它可能没有及时完成

因此，您需要检查您的请求是否已完成、失败或正在运行

您可以将其用于渲染方法中的内容

推荐阅读
关于
的官方博客仍然没有工作伙伴。。。当我控制台.log（this.state.cityWeather.wind）时。。。它的节目。。{“速度”：5.1，“度”：360}这很有道理。。。但是当我尝试console.log（this.state.cityWeather.wind.speed）时。。它正在抛出错误。。
render() {
    let test = this.state.cityWeather;
    if (!test) {
        return 'Loading...';
    }

    ....
}