简单地从 api 渲染数据

Question

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

  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 的数据时继续前进而不会陷入困境。

Answer 1

不完全确定this.setState()的作用，但我认为它应该设置成员state 。

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

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，这意味着首先记录this.state ，然后this.state.marketdata等等，直到你看到你收到和设置的内容。