时间戳

首页 > 解决方案 > 简单地从 api 渲染数据

javascript - 简单地从 api 渲染数据

问题描述

我正在尽我最大的努力来理解这个概念，在浪费了几个小时之后，我想我试着看看是否有人会善意地解决和详细说明这样一个简单的问题

  constructor(props) {
    super(props);
    this.state = {
        marketdata: [],
        loading: true
    }
  }


componentDidMount() {
    axios.get('https://api.coingecko.com/api/v3/global')
    .then(res => res.data)
    .then((data) => {
      this.setState({ marketdata: data })
      console.log(this.state.marketdata.data.market_cap_change_percentage_24h_usd)
     })
}

...

render() {

    const { coindata, marketdata} = this.state;

    <p>{marketdata.data.market_cap_change_percentage_24h_usd}</p>

类型错误：无法读取未定义的属性“market_cap_change_percentage_24h_usd”

我希望能够更好地理解，这样我就可以在整个项目中尝试使用来自 API 的数据时继续前进而不会陷入困境。

标签： javascriptreactjsapiaxios

解决方案

不完全确定是什么this.setState()，但我认为它应该设置 member state。

问题是您尝试在该对象不存在时访问该对象的成员。所以，你应该改变

this.state.marketdata.data.market_cap_change_percentage_24h_usd

到

this.state.marketdata.market_cap_change_percentage_24h_usd

{ marketdata: data }并不意味着新属性是marketdata.data，而是冒号（:）是一个赋值，就像=，所以marketdata获取的值data。

如果这不起作用，请尝试从“从上到下” console.log ，这意味着首先 log this.state，然后this.state.marketdata依此类推，直到您看到收到并设置的内容。

推荐阅读