致力于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();
}