无法读取属性对象 reactJS

Question

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

Answer 1

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

Answer 2

很简单，api 调用是异步的，因此 this.state.dataC 将是 {}，直到您收到 api 响应。

在第一次呈现期间，当您尝试访问时：

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

Can't read property XYZ of undefined.

解法：

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

像这样：

render(){

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

   return (
       ....
   )
}

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

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

建议:

而不是在 componentWillMount, write it inside componentDidMount.

中调用 api

Answer 3

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

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

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

dataC.General.H1Text

而不是这个：

dataC.Data.General.H1Text

无法读取属性对象 reactJS

Cannot read property object reactJS

javascript

api

json

reactjs

axios

无法读取 属性 对象 reactJS

Cannot read property object reactJS

javascript

api

json

reactjs

axios

无法读取属性对象 reactJS