React嵌套数组执行map报Cannot read property 'map' of undefined如何解决

• 你的数据结构中number.s[0].l是数组类型，数组本身没有serial属性，你直接调用number.s[0].l['serial'].map()本质是对undefined调用map方法，自然触发报错。
• serial是l数组内每个元素的属性，你需要先遍历l数组，再取每个元素的serial字段。

{this.state.serials.map((number, index) => { 
  return number.s && number.s.length ? ( 
    /* 多个同级JSX元素需要用React片段包裹，避免语法报错 */
    <React.Fragment key={index}>
      <h2>{number.s[0].za}</h2> 
      <ul> 
        {number.s[0].l.map((option, idx) => <li key={idx}>{option.serial}</li>)} 
      </ul> 
    </React.Fragment>
  ) : null 
})}

如果数据可能存在l字段为空/未定义的情况，可以额外加一层判断，避免出现类似报错：

{number.s[0].l && number.s[0].l.length ? number.s[0].l.map((option, idx) => <li key={idx}>{option.serial}</li>) : null}

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