Как использовать данные API в JSX после метода componentDidMount, React?

Question

Я создаю базовое веб-приложение для измерения биткойнов, которое показывает скорость биткойнов. Я делаю вызов API в методе componentDidMount () и получаю данные успешно. Но когда я использую его в JSX, он выдает ошибку this.state.ValueOfBitcoin.bpi не определено

вот мой App.js

import React, {Component} from 'react';
import './App.css';
import axios from 'axios';

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      ValueOfBitcoin: []
    }
  }

  componentDidMount(){
    axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        var valueofbitcoin = response.data;
        console.log(valueofbitcoin);
        this.setState({ValueOfBitcoin: valueofbitcoin})
        console.log(this.state.ValueOfBitcoin.bpi.USD.rate);
      })
  }

  render(){
    console.log(this.state.ValueOfBitcoin);

    return (
      <div className="App">
            <h1>Bitcoin meter</h1>
            <div>
              <h2>Eur</h2><p>{this.state.ValueOfBitcoin.bpi.EUR.rate}</p>
            </div>
            <div>
              <h2>GBP</h2><p>{this.state.ValueOfBitcoin.bpi.GBP.rate}</p>
            </div>
            <div>
              <h2>USD</h2><p>{this.state.ValueOfBitcoin.bpi.USD.rate}</p>
            </div>
      </div>
    )
  }

}

export default App;

bpi - это объект внутри основного объекта, который я получаю от вызова API. в bpi у меня есть объекты EUR, GBP & USD, у которых есть ключ ставки.

Также this.state.ValueOfBitcoin.bpi.USD.rate в componentenetDidMount () успешно выходит из системы. Но когда я использую this.state.ValueOfBitcoin.bpi.USD.rate, он выдает this.state.ValueOfBitcoin.bpi не определено

Может кто-нибудь помочь?

Answer 1

class App extends Component{
  constructor(props) {
    super(props);

    this.state = {}
  }

  componentDidMount(){
    axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.setState({valueofbitcoin: response.data})
      })
  }

  render(){
   const {valueofbitcoin} = this.state;
   let eurRate = valueofbitcoin ? valueofbitcoin.bpi.EUR.rate: ''
   let gbpRate = valueofbitcoin ? valueofbitcoin.bpi.GBP.rate: ''
   let usdRate = valueofbitcoin ? valueofbitcoin.bpi.USD.rate: ''
    return (
      <div className="App">
        <h1>Bitcoin meter</h1>
        <div>
          <h2>Eur</h2><p>{eurRate}</p>
        </div>
        <div>
          <h2>GBP</h2><p>{gbpRate}</p>
        </div>
        <div>
          <h2>USD</h2><p>{usdRate}</p>
        </div>
      </div>
    )
  }
}

Answer 2

import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

class App extends Component{
  constructor(props) {
    super(props);

    this.state = {}
  }

  componentDidMount(){
    axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.setState({valueofbitcoin: response.data})
      }).catch(function (error) {
        if (error.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(error.response.data);
        } else if (error.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(error.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message);
        }
        console.log(error.config);
      });
  }

  render(){
   const {valueofbitcoin} = this.state;
   let eurRate = !!valueofbitcoin ? valueofbitcoin.bpi.EUR.rate: ''
   let gbpRate = !!valueofbitcoin ? valueofbitcoin.bpi.GBP.rate: ''
   let usdRate = !!valueofbitcoin ? valueofbitcoin.bpi.USD.rate: ''
    return (
      <div className="App">
        <h1>Bitcoin meter</h1>
        <div>
          <h2>Eur</h2><p>{eurRate}</p>
        </div>
        <div>
          <h2>GBP</h2><p>{gbpRate}</p>
        </div>
        <div>
          <h2>USD</h2><p>{usdRate}</p>
        </div>
      </div>
    )
  }
}
export default App;

The !! проверяет, является ли ответ нулевым или неопределенным, а также вы должны проверить проверки в вызове API следующим образом.