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

您正在调用的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 }...
})

Answer 2

科哈斯所说的是绝对正确的。

我想澄清一些让您更好地了解何时使用地图的术语。

当数组包含对象列表时，可以使用map。地图适用于数组，因此this.state.xxx.map不是函数，这意味着它不是对象。

如果它是一个对象但不是对象数组，那么您也可以使用Object.entries或Object.keys进行迭代。

您应该了解这种差异。虽然这是戏剧的希望，但这个概念可以解释这一点。

显示Axios响应-TypeError：this.state.cryptos.map不是函数

2 个答案: