Отобразить ответ Axios - Ошибка типа: this.state.cryptos.map не является функцией

Question

Я новичок в React и столкнулся с проблемой при попытке отобразить ответ на запрос axios. Вот ошибка, которую я получаю при загрузке компонента TypeError: this.state.cryptos.map is not a function

Вот мой компонент реакции:

import React from "react";
import {Link} from 'react-router-dom';
import axios from "axios"
import CryptoCurrency from '../presentationals/CryptoCurrency'

class CryptoView extends React.Component {
    constructor() {
        super();
        this.state = { cryptos: [] };
      }

    componentWillMount() {
        axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT,LOOM,EOS&tsyms=USD')
            .then(res => {
                console.log(res.data);
                this.setState({cryptos: res.data});
            })
            .catch(error => {
                console.log(error)
            })
    }

    render() {
        const cryptocurrencies = this.state.cryptos.map((crypto, index) =>
        <CryptoCurrency
          key = { index }
          title = { crypto.title }
          subtitle = {crypto.subtitle }
          image = { crypto.image }
        />
      )
        return(
            <div>
                <h1>Crypto View Screen </h1>
                <Link to="../">Back</Link>
                {cryptocurrencies}
            </div>
        )
    }
}

export default CryptoView

Извините, если это действительно простая ошибка, которую я пропускаю, я не могу решить проблему и двигаться дальше. Я не предоставлял код для презентационного компонента CryptoCurrency, так как он, похоже, не имеет к этому никакого отношения, но я могу предоставить его при необходимости

Answer 1

То, что упомянул Кохарс, абсолютно верно.

Несколько вещей, которые я хочу уточнить, чтобы вы лучше понимали, когда использовать карту.

Вы можете использовать карту, когда ваш массив содержит список объектов.Карта работает с массивом, поэтому this.state.xxx.map не является функцией, то есть это не объект.

Если это объект, но не массив объектов, вы можете использовать Object.entries или Object.keys.тоже делать итерацию.

Вы должны понимать эту разницу.Хотя это театральная надежда, которую объясняет концепция.

Answer 2

URL, который вы вызываете, возвращает объект, а не массив.

Итак, у вас есть this.state.cryptos:

cryptos = {
  "BTC": {
    "USD": 6766.97
  },
  "ETH": {
    "USD": 278.22
  },
  "IOT": {
    "USD": 0.5418
  },
  "LOOM": {
    "USD": 0.09514
  },
  "EOS": {
    "USD": 5.05
  }
}

Я бы порекомендовал вам использовать Object.entries(), чтобы справиться с этим

Object.entries(cryptos).map(crypto => {
  console.log(crypto[0]) // BTC, ETH...
  console.log(crypto[1]) //​​​​​{ USD: 6766.97 }, ​​​​​{ USD: 278.22 }...
})