无法读取属性对象 reactJS答案

【问题标题】：Cannot read property object reactJS无法读取属性对象 reactJS
【发布时间】：2017-08-08 14:08:48
【问题描述】：

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

示例 json：cryptocompare

【问题讨论】：

尝试使用dataC.General.H1Text 而不是dataC.Data.General.H1Text
当你做console.log(this.state.dataC)只是为了看看结构，你会得到什么。

标签： javascript json api reactjs axios

【解决方案1】：

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

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

this.state.dataC.Data 它将是 undefined，当您尝试访问 undefined 的任何值时，它会抛出错误：

无法读取未定义的属性 XYZ。

解决方案：

检查数据，一旦你得到数据然后只渲染然后UI。

像这样：

render(){

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

   return (
       ....
   )
}

你也可以检查每个值，像这样：

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

建议：

不要在 componentWillMount 中进行 api 调用，而是将其写在 componentDidMount 中。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

首先你应该只在componentDidMount方法DOCS中获取异步数据
我认为可能会导致问题的另一件事是：

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

您实际上已经访问了data 属性。在您的渲染方法中，您应该这样做：

dataC.General.H1Text

而不是这个：

dataC.Data.General.H1Text

【讨论】：