无法从coinmarketcap (reactjs)引用对象

Question

我有下面这段代码：

class App extends Component {

  constructor() {
    super()
    this.state = {
      coins: []
    }
  }

  componentDidMount() {
    fetch('https://api.coinmarketcap.com/v1/ticker/')
    .then(response=>response.json())
    .then(data => this.setState({coins: data}));
  }


  render() {
    const test = this.state.coins[0];
    console.log(test);
    return (
      ...
    );
  }
}

export default App;

test返回一个具有id、名称等的对象，如下所示：

{id: "bitcoin", name: "Bitcoin", symbol: "BTC", rank: "1", price_usd: "6545.84", …}

如何访问该名称或id？我尝试了console.log(test.id)或console.log(测试“id”)，但他们总是给我错误。

这是我得到的错误：

TypeError: Cannot read property 'id' of undefined
App.render
src/App.js:23
  20 | 
  21 | render() {
  22 |   const test = this.state.coins[0];
> 23 |   console.log(test.id);
  24 |   return (
  25 |     <div className="App">
  26 |       <header className="App-header">

谢谢

Answer 1

获取是在asynchronously中执行的。所以，你的componentDidUpdate应该是这样的：

async componentDidMount() {
    async fetch('https://api.coinmarketcap.com/v1/ticker/')
    .then(response=>response.json())
    .then(data => this.setState({coins: data}));
}

您遇到的问题是因为当您尝试获取硬币时，请求尚未完成。fetch()和this.setState()是异步方法。