Блог

Я пытаюсь загрузить данные из exchangeratesapi, но каким-то образом я не могу загрузить данные exchangerates!!

 componentDidMount() {
        this.setState({loading: true})
        fetch("https://api.exchangeratesapi.io/latest")
            .then(response => response.json())
            .then(data => {
                console.log(data)
                this.setState({
                    loading: false,
                    currency: data,
            })
            })
    }

  

   render() {
        var text = this.state.loading ? "loading..." : this.state.currency.BGN
        return (
            <div>
                <p>{this.state.currency.RON}</p>
            </div>
        )
    }
  

Я попробовал самый тупой способ загрузки данных.

 omponentDidMount() {
        this.setState({loading: true})
        fetch("https://api.exchangeratesapi.io/latest")
            .then(response => response.json())
            .then(data => {
                console.log(data)
                this.setState({
                    loading: false,
                    currency: data,
                    bulgaria:data.rates.BGN,
      })
            })
    }

  

И внутри render

 var text = this.state.loading ? "loading..." : this.state.currency.bulgaria
  

Но я считаю, что должен быть лучший способ сделать это.

Вы пытаетесь получить доступ к свойству напрямую из currency однако оно существует в rates .

Это неверно:

 {this.state.currency.RON}
  

Это должно быть:

 {this.state.currency.rates.RON}
  

Аналогично, созданная вами переменная text нигде не используется. ИМХО это должно быть так:

     render() {
            const {loading, currency} = this.state;
            console.log(currency); //only for debugging
            return (
                { loading? 'Loading...' : (
                <div>
                    <p>{currency.rates.RON}</p>
                </div>)
                }
            )
        }