Reactjs 我正在尝试使用React和Axios调用天气API。我正在尝试console.log结果，但它表示未定义…：(

当我尝试控制台日志时，它的状态是未定义的。我还放置了JSON文件。 我已经在这里发布了端点json文件。我相信在连接json时会出现问题。 当我尝试控制台日志时，它的状态是未定义的。我还放置了JSON文件。 我已经在这里发布了端点json文件。我相信在连接json时会出现问题

class App extends Component {
  state = {
    content: [{ coord: "" }, { base: "" }]
  };

  componentDidMount() {
    axios
      .get(
        "https://api.openweathermap.org/data/2.5/weather?q=berlin&appid=240ef553958220e0d857212bc790cd14"
      )
      .then(res => {
        this.setState({
          content: [
            {
              coord: res.data.coord
            },
            { base: res.data.base }
          ]
        });
      });
  }
  render() {
    console.log(this.state.content.coord);

    return (
      <div className="App center">
        <h2 className="blue-text">Weather App</h2>
        <div></div>
        <Weather />
      </div>
    );
  }
}

export default App;



JSON endpoint goes here....
{
  "coord": {
    "lon": 13.41,
    "lat": 52.52
  },
  "weather": [
    {
      "id": 803,
      "main": "Clouds",
      "description": "broken clouds",
      "icon": "04n"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 276.88,
    "feels_like": 268.47,
    "temp_min": 275.37,
    "temp_max": 278.15,
    "pressure": 994,
    "humidity": 80
  },
  "visibility": 10000,
  "wind": {
    "speed": 9.3,
    "deg": 240,
    "gust": 14.4
  },
  "clouds": {
    "all": 75
  },
  "dt": 1580260557,
  "sys": {
    "type": 1,
    "id": 1275,
    "country": "DE",
    "sunrise": 1580280826,
    "sunset": 1580312685
  },
  "timezone": 3600,
  "id": 2950159,
  "name": "Berlin",
  "cod": 200
}

类应用程序扩展组件{
状态={
内容：[{coord:：}，{base:：}]
};
componentDidMount（）{
axios
.得到(
"https://api.openweathermap.org/data/2.5/weather?q=berlin&appid=240ef553958220e0d857212bc790cd14"
)
。然后（res=>{
这是我的国家({
内容：[
{
坐标：res.data.coord
},
{base:res.data.base}
]
});
});
}
render（）{
log（this.state.content.coord）；
返回(
天气应用程序
);
}
}
导出默认应用程序；
JSON端点在这里。。。。
{
“合作社”：{
“lon”：13.41，
“lat”：52.52
},
“天气”：[
{
“id”：803，
“主要”：“云”，
“描述”：“碎云”，
“图标”：“04n”
}
],
“基站”：“基站”，
“主要”：{
“温度”：276.88，
“感觉像”：268.47，
“最低温度”：275.37，
“最高温度”：278.15，
“压力”：994，
“湿度”：80
},
“能见度”：10000，
“风”：{
“速度”：9.3，
“度数”：240，
“阵风”：14.4
},
“云”：{
“全部”：75
},
“dt”：158020557，
“系统”：{
“类型”：1，
“id”：1275，
“国家”：“德”，
“日出”：1580280826，
《日落》：1583012685
},
“时区”：3600，
“id”：2950159，
“名称”：“柏林”，
“cod”：200
}

您可以使您的状态如下所示，从而使读取和访问数据更加容易

state = {
  content: {
    coord: "",
    base: "",
  },
}

您的设置状态如下所示：

this.setState({
    content: {
        coord: res.data.coord,
        base: res.data.base
      }
})

---

由于

content

是一种数组类型，因此您可以直接访问

coord

或

base

。而是将其更改为对象或基于数组索引进行访问，如下所示

this.state.content[0].coord / this.state.content[1].base

this.setState({
  content: { coord: res.data.coord, base: res.data.base }
});

如果您将

内容

更改为对象类型，您可以像我那样直接访问

coord

或

base

示例代码：

state = {
    content: { coord: "", base: "" }
  };

在请求获取之后，您可以像这样更新状态

this.state.content[0].coord / this.state.content[1].base

this.setState({
  content: { coord: res.data.coord, base: res.data.base }
});

---

您不能从

内容

直接访问

coord/base

，将其状态为数组。请将其更改为object。