React Material UI使用map遍历Select数据报TypeError问题

问题复现信息 #

待渲染的目标数组数据：

"secondClassCalmPrices":[
  ["Kan ej ombokas","431","SEK","Företagspris"],
  ["Kan ombokas","525","SEK","Företagspris"],
  ["Kan återbetalas","724","SEK","Företagspris"]
]

原始报错组件代码：

<Select
    labelId="demo-simple-select-standard-label"
    id="demo-simple-select-standard"
    value={props.legs.secondClassCalmPrices}
    label="ticket type"
    variant="standard"
    className="calm-class-select"
>
    {props.legs.secondClassCalmPrices.map((info) => {
      return <MenuItem>{info}</MenuItem>;
    })}
</Select>

报错根因 #

• 核心触发原因：执行map方法时，props.legs.secondClassCalmPrices值为undefined。最常见的场景是组件首次挂载阶段，父组件传递的legs数据还未完成异步加载赋值，初始状态下不存在secondClassCalmPrices字段，对undefined值调用数组方法就会抛出该类型错误。
• 代码附带逻辑问题：
  • Select组件的value属性直接绑定了整个数组，不符合MUI Select的取值规范，会导致选中状态异常
  • 遍历生成的MenuItem未绑定value属性，无法和Select的选中值做匹配
  • 遍历项info本身是长度为4的子数组，直接作为子节点渲染会出现展示异常，同时缺少React列表渲染要求的唯一key属性，会触发渲染警告

修复方案 #

1. 增加可选链与空值兜底，避免首次渲染时对undefined调用map方法
2. 调整Select的value绑定逻辑，单独维护选中值状态
3. 拆解遍历得到的子数组字段，给MenuItem配置正确的value和唯一key，组装展示内容

修复后可运行代码参考：

import { useState } from 'react';
import { Select, MenuItem } from '@mui/material';

// 单独维护选中票种的状态，不要直接绑定整个数组
const [selectedTicket, setSelectedTicket] = useState('');

const handleTicketChange = (event) => {
  setSelectedTicket(event.target.value);
};

<Select
    labelId="demo-simple-select-standard-label"
    id="demo-simple-select-standard"
    value={selectedTicket}
    label="ticket type"
    variant="standard"
    className="calm-class-select"
    onChange={handleTicketChange}
>
    {/* 用可选链?. 加默认空数组做兜底，数据未加载完成时遍历空数组不会报错 */}
    {(props.legs?.secondClassCalmPrices || []).map((info, idx) => {
      // 解构子数组的四个字段：票种名称、价格、货币单位、价格类型
      const [ticketName, price, currency, priceType] = info;
      return (
        <MenuItem
          key={`ticket-${idx}-${ticketName}`}
          value={ticketName}
        >
          {`${ticketName}：${price} ${currency}（${priceType}）`}
        </MenuItem>
      );
    })}
</Select>

优化建议：如果数据加载耗时较长，可以在数据未返回时渲染加载占位，等props.legs.secondClassCalmPrices确认为数组后再渲染Select组件，体验会更好。

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