TypeError:在数组上映射时,null不是对象

时间:2018-12-20 20:45:24

标签: javascript arrays react-native

致力于Let’s Build: Cryptocurrency Native Mobile App With React Native + Redux — Chapter IV

我正在使用CoinMarketCap API将有关不同货币的信息返回到数组。当我从组件的renderCoinCards()方法调用render()时,我得到TypeError: null is not an object while mapping over an array (evaluating 'crypto.data.map')

renderCoinCards

renderCoinCards() {
    const { crypto } = this.props;
    return crypto.data.map((coin) => 
        <CoinCard 
            key={coin.name}
            coin_name={coin.name}
            symbol={coin.symbol}
            price_usd={coin.price_usd}
            percent_change_24h={coin.percent_change_24h}
            percent_change_7d={coin.percent_change_7d}
        />
    ) 
}

这是我从API调用中收到的信息。我记录了crypto,并且正如预期的那样,我看到了一个对象数组。为什么我不能map呢?

console.log(crypto)

  "crypto": Object {
    "data": Array [
      Object {
        "24h_volume_usd": "8453833004.26",
        "available_supply": "17433412.0",
        "id": "bitcoin",
        "last_updated": "1545338123",
        "market_cap_usd": "70044797328.0",
        "max_supply": "21000000.0",
        "name": "Bitcoin",
        "percent_change_1h": "-2.22",
        "percent_change_24h": "5.95",
        "percent_change_7d": "19.47",
        "price_btc": "1.0",
        "price_usd": "4017.84787328",
        "rank": "1",
        "symbol": "BTC",
        "total_supply": "17433412.0",
      },
      Object {
        "24h_volume_usd": "1030004521.77",
        "available_supply": "40762365544.0",
        "id": "ripple",
        "last_updated": "1545338105",
        "market_cap_usd": "15003231633.0",
        "max_supply": "100000000000",
        "name": "XRP",
        "percent_change_1h": "-2.05",
        "percent_change_24h": "1.31",
        "percent_change_7d": "22.02",
        "price_btc": "0.00009160",
        "price_usd": "0.3680657742",
        "rank": "2",
        "symbol": "XRP",
        "total_supply": "99991744391.0",
      },
      Object {...},
      Object {...},
      Object {...}
      ... 
      }

componentDidMount

根据React Docs中的建议,将componentWillMount(不建议使用)交换为componentDidMount

componentDidMount() {
    this.props.FetchCoinData();
  }

0 个答案:

没有答案
相关问题