javascript - react ；访问对象内的字段

Question

这是我的第一个问题，我希望没问题: 我正在学习 React，目前正在尝试从 API 中提取天气数据。我可以毫无问题地保存数据，并且也可以毫无问题地访问第一对象层。但我需要的数据在第三层(data -> main -> temp)，并且在尝试访问main.temp时出现未定义的错误

showing "main" on the consoles gives me this: 
humidity: 87
pressure: 1017
temp: 285.81
temp_max: 287.04
temp_min: 284.26

但我不知何故无法访问其中的字段。 这是我仍然有效的代码:

import React from "react";
import axios from "axios";

class alex extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      daten: []
    };
    this.tempConverter = this.tempConverter.bind(this);
  }

  componentDidMount() {
    axios
      .get(
        `https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=436238e5e5563aff959aff1d8acc8e32`
      )
      .then(res => {
        this.setState({ daten: res.data });
      });
  }

  tempConverter() {
    const data = this.state.daten.main;
    console.log(data);
  }

  render() {
    return <div>Current Temperatur: {this.tempConverter()}</div>;
  }
}

export default alex;

当尝试在convertTemp()函数中访问data.temp时，我得到TypeError:无法读取未定义的属性“temp”

非常感谢您的帮助。

Answer 1

我将初始状态值设置为 null，并且只有当它不为 null 时，我才调用 tempConverter。

import axios from "axios";
import React from "react";

class alex extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      daten: null
    };
    this.tempConverter = this.tempConverter.bind(this);
  }

  componentDidMount() {
    axios
      .get(
        `https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=436238e5e5563aff959aff1d8acc8e32`
      )
      .then(res => {
        this.setState({ daten: res.data });
      });
  }

  tempConverter() {
    const data = this.state.daten.main;
    console.log(data.temp); // 286.63
  }

  render() {
    return (
      <div>Current Temperatur: {this.state.daten && this.tempConverter()}</div>
    );
  }
}
export default alex;

示例代码和框:

https://codesandbox.io/s/awesome-fog-dubzb