为什么我的应用程序工作时，我评论和取消评论

Question

import React from 'react'
import CoinItem from './CoinItem'
const Coins = (props) => {
return (
<div className='container'>
<div>
<div className='heading'>
<p>#</p>
<p className='coin-name'>Coins</p>
<p>Price</p>
<p>24h</p>
<p className = 'hide-mobile'>Volume</p>
<p className = 'hide-mobile'>Market Cap</p>
</div>
{props.coins.map(coins => {
return (
<CoinItem coins={coins} key={coins.id} />
)
})}
</div>
</div>
)
}
export default Coins

使用这段代码，我的应用程序不会渲染，我得到错误，"Uncaught TypeError: props. seconds .map is not a function.";但是，它将我引导到用标题的类名创建div的行。

然而，当我注释掉:

{props.coins.map(coins => {
return (
<CoinItem coins={coins} key={coins.id} />
)
})}

并再次取消注释，我的应用程序在API工作的情况下完美地呈现，但是再一次，当我刷新时，应用程序不呈现。

如何解决这个问题?

CodeSandbox链接:https://codesandbox.io/s/busy-cloud-pcfne0?file=/src/components/Coins.js:409-512

Answer 1

你可以做的几件事是:

1. 确保"硬币";道具的存在。

2. 如果它存在，确保它是一个数组而不是一个对象。不能在对象上使用.map()。它是一个数组方法。

3. 要避免代码在coins为null/undefined时运行.map()，请添加?在道具。硬币，以便.map()只在定义了硬币时运行。

   {props.coins?.map(coin => { /*YOUR CODE HERE*/ })