Javascript 无法读取属性对象

5个小时了我不明白问题出在哪里 帮助我的人， 我只需要提取数据

import React,{Component} from 'react';
import axios from 'axios';
import CoinsConvert from '../data/data'
import '../style/bootstrap.min.css';


class BoxInfo extends Component{

  constructor(){
    super();
    this.state={
      dataC:{}
    }

  }
  componentWillMount(){
        let code=CoinsConvert[this.props.match.params.coin_url];
        axios.get(`https://www.cryptocompare.com/api/data/coinsnapshotfullbyid/?id=${code}`)
        .then(da=>this.setState({dataC:da.data})).catch(()=>{console.error()})
  }
 render(){
   let dataC=this.state.dataC;
    return(
      <div className="container">
        <div className="panel panel-default text-center"  >
        <div className="panel-heading" >{ dataC.Data.General.H1Text}</div>
        <div className="panel-body "><img className="img-rounded"  width="500" height="500" src={""} /></div>
        </div>
      </div>
    );
   }
}

import React，{Component}来自'React'；
从“axios”导入axios；
从“../data/data”导入硬币转换
导入“../style/bootstrap.min.css”；
类BoxInfo扩展组件{
构造函数（）{
超级（）；
这个州={
dataC:{}
}
}
组件willmount（）{
让code=CoinsConvert[this.props.match.params.coin_url]；
axios.get(`https://www.cryptocompare.com/api/data/coinsnapshotfullbyid/?id=${code}`）
.then（da=>this.setState（{dataC:da.data}））.catch（（）=>{console.error（）}）
}
render（）{
让dataC=this.state.dataC；
返回(
{dataC.Data.General.H1Text}
);
}
}

---

示例json:

问题很可能是由于您设置了

dataC

作为异步数据获取的结果。因此，

componentWillMount

将完成，然后将调用

render

，注意在这一点上，数据可能仍然无法提取-因此在呈现中，您的dataC是未定义的。

简单的一个，api调用是异步的，因此

此.state.dataC

将是

{}

，直到您得到api响应

在尝试访问的第一次渲染期间：

this.state.dataC.Data

将是未定义的，当您尝试访问

未定义的任何值时，它将抛出错误：

无法读取未定义的属性XYZ

解决方案：

对数据进行检查，一旦获得数据，然后仅渲染ui

像这样：

render(){

   let dataC=this.state.dataC;
   if(!Object.keys(dataC)) return null;

   return (
       ....
   )
}

{ dataC.Data && dataC.Data.General && dataC.Data.General.H1Text}

您还可以对每个值进行检查，如下所示：

render(){

   let dataC=this.state.dataC;
   if(!Object.keys(dataC)) return null;

   return (
       ....
   )
}

{ dataC.Data && dataC.Data.General && dataC.Data.General.H1Text}

建议：

不要在内部进行api调用，而是将其写入
内部。首先，您应该仅在
componentDidMount
方法中获取异步数据

我认为另一件事可能会引起问题，这一行：

this.setState({dataC:da.data})

实际上您已经访问了
数据
属性。
在渲染方法中，应执行以下操作：

dataC.General.H1Text

与此相反：

dataC.Data.General.H1Text

尝试
dataC.General.H1Text
而不是
dataC.Data.General.H1Text
当您执行
console.log（this.state.dataC）
时，您会得到什么。