Javascript 如何在页面上显示标识符？

我使用react.js连接api

我想在页面上显示标识符

下面是对console.log（this.state.weathers.cwbopendata）的响应

在i console.log（this.state.weathers.cwbopendata.identifier）之后 ，我弄错了 如何在页面上显示标识符

代码如下：

 import React,{Component} from 'react';

 class App extends Component {
  constructor(){
    super();
     this.state = {
       weathers: {},
     };
   }
  componentDidMount(){
      fetch('https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-C0032-001?Authorization=CWB-BB78764B-9687-4C1C-B180-66CB616129E5&format=JSON')
      .then(response=> response.json())
      .then( JSON=> this.setState({weathers:JSON}))
   }

   render(){
      return (
         <div className="App">

          {console.log(this.state.weathers.cwbopendata.identifier)} 
         </div>

    );
   }
  }

 export default App;

import React，{Component}来自'React'；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
韦瑟斯：{}，
};
}
componentDidMount（）{
取（'https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-C0032-001?Authorization=CWB-BB78764B-9687-4C1C-B180-66CB616129E5&格式=JSON'）
.then（response=>response.json（））
.then（JSON=>this.setState（{weathers:JSON}））
}
render（）{
返回(
{console.log（this.state.weathers.cwbopendata.identifier）}
);
}
}
导出默认应用程序；

最初

render

方法在

componentDidMount

之前被调用

在调用它的时候，数据还没有被提取出来

所以当你们有空的状态时，你们应该适当地处理这种情况

import React，{Component}来自'React'；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
韦瑟斯：{}，
};
}
componentDidMount（）{
取（'https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-C0032-001?Authorization=CWB-BB78764B-9687-4C1C-B180-66CB616129E5&格式=JSON'）
.then（response=>response.json（））
.then（JSON=>this.setState（{weathers:JSON}））
}
render（）{
返回(
{console.log（this.state.weathers.cwbopendata&&this.state.weathers.cwbopendata.identifier）}
);
}
}
导出默认应用程序这是许多新手面临的一个经典问题。您需要添加一个状态，让您的组件知道数据获取正在进行、已完成或出现错误。因此，当组件成功获取数据时，它可以显示真实数据，在此之前，您可以向UI显示一些内容，让用户知道应用程序正在获取数据。。。我会这样写：

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      weathers: {},
      isFetching: true
    };
  }
  componentDidMount() {
    fetch(
      "https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-C0032-001?Authorization=CWB-BB78764B-9687-4C1C-B180-66CB616129E5&format=JSON"
    )
      .then(response => response.json())
      .then(json => this.setState({ weathers: json, isFetching: false }));
  }

  render() {
    const { isFetching, weathers } = this.state;
    return (
      <div className="App">
        {isFetching ? "Loading.." : weathers.cwbopendata.identifier}
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
韦瑟斯：{}，
isFetching：真的
};
}
componentDidMount（）{
取回(
"https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-C0032-001?Authorization=CWB-BB78764B-9687-4C1C-B180-66CB616129E5&格式=JSON“
)
.then（response=>response.json（））
.then（json=>this.setState（{weathers:json，isFetching:false}））；
}
render（）{
const{isFetching，weathers}=this.state；
返回(
{isFetching？“正在加载…”：weathers.cwbopendata.identifier}
);
}
}
导出默认应用程序；

在您的例子中，您试图在第一次装载时呈现数据，此时weathers只持有一个空对象
{}
。因此，
weather.cwbopendata
返回
undefined
，并且
undefined.identifier
抛出错误，正如您在浏览器控制台中看到的那样。
在第一次渲染期间，
this.state.weather.cwbopendata
未定义-第一个控制台语句显示相同的内容，错误解释了相同的内容。在尝试访问
.identifier