我只需要提取数据
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>
);
}
}
示例json：cryptocompare
4条答案
按热度按时间gzszwxb41#
很简单，API调用是异步的，所以在得到API响应之前，
this.state.dataC将是{}。在第一次渲染期间，当您尝试访问：
this.state.dataC.Data将是undefined，当你试图访问undefined的任何值时，它将抛出错误：无法读取未定义的属性XYZ。
解决方案：
检查数据，一旦你得到数据，然后只渲染然后ui。
就像这样：
你也可以检查每个值，像这样：
建议：
不要在componentWillMount内部调用API，而是将其写入componentDidMount内部。
3zwjbxry2#
最有可能的问题是由于您设置
dataC作为获取数据的结果。因此componentWillMount将完成，然后render将被调用，注意！- 在这一点上，数据可能还没有被获取-所以在render中，你的dataC是未定义的。b1uwtaje3#
首先，您应该只在
componentDidMount方法DOCS中获取数据另一件我认为可能会引起问题的事情，关于这条线：
您实际上已经访问了
data属性。在你的render方法中，你应该这样做：而不是这样：
yftpprvb4#
使用可选链接：
const data = somevalue; console.log（data？.value）;