javascript - 简单地从 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>

TypeError: Cannot read property 'market_cap_change_percentage_24h_usd' of undefined

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

Answer 1

不完全确定 this.setState() 的作用，但我认为它应该设置成员 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，这意味着首先记录 this.state ，然后记录 this.state.marketdata 等等，直到您看到收到并设置的内容。