无法读取属性对象reactJS

它的5个小时，我不明白是什么问题有人谁帮助我，我只需要提取数据无法读取属性对象reactJS

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> 
    ); 
    } 
}

click to see image

例如JSON：cryptocompare

来源

2017-08-08 Aymen

'dataC.General.H1Text'代替'dataC.Data.General.H1Text' –

你是什么当你执行'console.log（this.state.dataC）'来获得结构。 – abdul

简单的一个，api调用是异步的，所以this.state.dataC将会是{}，直到你得到api响应。

在第一渲染当您尝试访问：

this.state.dataC.Data这将是不确定，当您尝试访问的undefined任何值，它将引发错误：

Can't read property XYZ of undefined.

解决方案：

把检查数据，一旦你得到的数据，然后只渲染然后用户界面。

像这样：

render(){ 

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

    return (
     .... 
    ) 
}

你也可以把支票上的每一个值，就像这样：

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

建议：

，而不是使内部API调用componentWillMount，写在里面componentDidMount。所有的

来源

2017-08-08 14:12:58

谢谢大家！ – Aymen

最有可能的问题是由于您设置dataC作为异步数据读取的结果。因此componentWillMount将完成，然后render将被调用，并注意！ - 在这一点上，数据可能还没有被提取 - 所以在渲染你的dataC时未定义。

来源

2017-08-08 14:12:44 Amid

首先，你应该只在componentDidMount方法DOCS
，我认为可能会导致问题的另一件事情得到异步数据，这条线：

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

你居然已经访问data财产。在渲染处理方法，你应该这样做：

dataC.General.H1Text

取而代之的是：尝试

dataC.Data.General.H1Text

来源

2017-08-08 14:17:16

无法读取属性对象reactJS

回答

相关问题