React.js中如何在对prop执行map操作前检查其是否合法可用？

现有代码的核心问题 #

• 未校验topAsks本身是否为数组：当websocket推送异常时，topAsks可能直接为undefined或null，此时访问topAsks[0]会直接触发报错
• 仅校验首元素合法性无法覆盖全部元素：即使topAsks[0]是合法元组，也不代表数组内所有元素都是有效元组，高频数据推送时可能出现某一项为undefined的情况，遍历到非法项时访问item[0]就会报错

最优实现方案 #

1. 先给props添加默认值兜底，保证topAsks永远是数组类型：

function Orderbook({topAsks = [], topBids = []}) {

2. 遍历前先过滤掉所有非法元素，或者在访问元素时用可选链做兜底，不需要额外修改逻辑结构：

import React from 'react';

function Orderbook({topAsks = [], topBids = []}) {
  return (
    <div className="ob-cont">
      <div className="ob-title-cont">
        <div className="ob-title-marketsize"></div>
        <div className="ob-title-price"></div>
      </div>
       <div className="ob-sell-cont">
       {topAsks
        // 先过滤出长度>=2的数组元素，保证是合法元组
        .filter(item => Array.isArray(item) && item.length >= 2)
        .map((item, index) => (
           <div key={index} className="ob-sell-tile"> 
            <div className="ob-sell-tile">{item[0]}</div>
            <div className="ob-sell-tile">{item[1]}</div>
           </div>
          ))
       }
       </div>
    </div>
  );
}

export default Orderbook;

如果不想过滤掉非法元素，只是想避免报错，也可以用可选链+空值兜底的写法，不需要修改校验逻辑：

<div className="ob-sell-tile">{item?.[0] ?? ''}</div>
<div className="ob-sell-tile">{item?.[1] ?? ''}</div>

关于注释中for循环方案的说明 #

方案本身是可行的，但你写的原始代码存在边界问题：15个元素的数组下标范围是0~14，你的循环条件写了i <= 15，当i=15时topAsks[15]为undefined，访问topAsks[i][j]还是会触发报错。而且该方案属于非React惯用写法，没有必要绕开map单独处理，只要加好前置校验即可解决问题。

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