React注释取消代码运行正常 刷新报props.coins.map不是函数如何修复

报错Uncaught TypeError: props.coins.map is not a function的核心原因是组件首次渲染时，父组件传入的props.coins初始值不是数组类型。
注释掉map代码再取消注释能临时正常运行，是因为热更新触发重渲染时API请求已经完成，props.coins已经拿到了数组格式的返回值；但刷新页面时组件会立刻执行首次渲染，此时API请求还在 pending 状态，props.coins大概率是undefined、null或者其他非数组类型，本身不存在map方法，直接触发报错。

以下方案可单独使用，推荐组合使用做多层兜底，彻底避免崩溃：

方案1：给组件props设置默认数组值 #

直接在组件参数位置给coins设置空数组默认值，保证不管父组件传不传值、接口有没有返回，首次渲染时coins都是合法数组类型：

import React from 'react'
import CoinItem from './CoinItem'

// 解构props时直接给coins加默认值
const Coins = ({ coins = [] }) => {
  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>
          {coins.map(coin => {
            return (
                <CoinItem coins={coin} key={coin.id} />
            )
          })}
        </div>
      </div>
  )
}

export default Coins

方案2：渲染前增加类型校验 #

调用map前先判断coins是否为数组，非数组状态下可以渲染加载提示，避免直接报错：

// 其余代码保持不变，仅替换map渲染部分的逻辑
{Array.isArray(coins) 
  ? coins.map(coin => <CoinItem coins={coin} key={coin.id} />)
  : <div className="loading">数据加载中...</div>
}

方案3：修正父组件的状态初始值 #

找到父组件中传递给Coins组件的coins对应状态，把初始值设置为空数组，不要用undefined、null作为初始值：

// 父组件中存储币种数据的state写法
// 正确写法：初始值为空数组
const [coins, setCoins] = useState([])

// 错误写法：初始值留空或者设为null
// const [coins, setCoins] = useState()
// const [coins, setCoins] = useState(null)

注意：接口返回异常时也可能导致coins不是预期的数组格式，比如接口报错返回对象、字符串类型的错误信息，所以即使设置了初始值，也建议加上类型校验，避免接口异常时页面直接白屏崩溃。

内容的提问来源于stack exchange，提问作者ilaesm