javascript - 在reactjs中渲染嵌套对象

Question

我很难将嵌套对象渲染到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;

我已添加从天气 API 收到的 JSON 文件

//Json file
{
  "coord": { "lon": 174.77, "lat": -36.85 },
  "weather": [
    {
      "id": 804,
      "main": "Clouds",
      "description": "overcast clouds",
      "icon": "04n"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 293.7,
    "pressure": 1018,
    "humidity": 77,
    "temp_min": 293.15,
    "temp_max": 294.26
  },
  "visibility": 10000,
  "wind": { "speed": 5.1, "deg": 360 },
  "clouds": { "all": 92 },
  "dt": 1553672420,
  "sys": {
    "type": 1,
    "id": 7345,
    "message": 0.0043,
    "country": "NZ",
    "sunrise": 1553624951,
    "sunset": 1553667823
  },
  "id": 2193733,
  "name": "Auckland",
  "cod": 200
}

我正在尝试将风速从 JSON 渲染到我的页面。但是向我抛出一条错误消息，提示“TypeError:无法读取未定义的属性“速度””...请帮助。我对 ReactJs 还很陌生。

Answer 1

如果您查看代码，则会发现以下事件顺序:

1. 组件已创建，即调用构造函数
2. 组件已挂载，即调用componentDidMount
3. componentDidMount 启动一个 async 请求来获取数据，然后解析数据并将其设置为状态。
4. render 方法尝试从状态读取数据。

现在，由于 #3 中的请求是异步请求，因此第一次调用 render 方法时，它可能无法及时完成。

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

您可以使用它 conditionally render渲染方法中的内容。

推荐阅读官方reactjs博客条目async rendering with examples of when data is fetched from an external resource