Question

无法读取属性对象 reactJS

2017-08-08

1714

javascript reactjs json axios

我只需要提取数据

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

简单来说，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 ，将其写在 componentDidMount 里面。

Answer 2

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

Answer 3

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

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

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

dataC.General.H1Text

而不是这样：

dataC.Data.General.H1Text