React JS报Cannot read property 'map' of undefined错误求助

报错和mock数据加载、条件渲染逻辑无关，核心是传入的mock数据结构和代码预期的字段完全不匹配：

• 你代码中createCellsForRow函数要求入参是数组，调用位置是createCellsForRow(rowData.cells)，也就是默认每一行数据存在cells数组字段；但你提供的mock数据每一行只有SNO、SregID、Status三个属性，根本没有cells字段，rowData.cells实际值为undefined，对undefined调用.map()就会触发你看到的报错。
• 顺着代码逻辑往下看，后续还依赖行数据的key、toggleText字段，以及单元格数据的key、title字段，这些字段在当前mock里全部缺失，哪怕绕开当前的map报错，后续依然会连续触发undefined相关错误。
• 额外存在一个逻辑bug：存储选中行key的selectedKey初始值设为了空数组[]，但后续更新时存的是行的主键值（字符串/数字类型），类型不匹配会导致选中状态判断失效。

1. 修正状态初始值，统一selectedKey的类型：

   // 初始值设为null，和后续存储的主键类型匹配
   const [selectedKey, setSelectedKey] = useState(null);
   

2. 给所有调用map的工具函数加类型兜底，避免极端场景下非数组入参触发报错：

   const createCell = cell => ({ key: cell.key, children: cell.title });
   const createCellsForRow = cells => Array.isArray(cells) ? cells.map(cell => createCell(cell)) : [];
   

3. 改写行数据生成逻辑，把现有mock的字段映射成表格组件要求的结构，不需要强行让mock适配你原来写死的字段读取逻辑：

   const createRows = data => {
     if (!Array.isArray(data)) return [];
     return data.map((item, rowIndex) => {
       // 把mock里的字段拼成组件要求的单元格数组，对应表头的4列
       const rowCells = [
         { key: `row-${rowIndex}-sno`, title: item.SNO },
         { key: `row-${rowIndex}-regid`, title: item.SregID },
         { key: `row-${rowIndex}-status`, title: item.Status },
         { key: `row-${rowIndex}-action`, title: '操作' }
       ];
       return {
         key: item.SNO,
         cells: createCellsForRow(rowCells),
         toggleAction: {
           metaData: { key: item.SNO },
           onToggle: handleRowToggle,
           isToggled: selectedKey === item.SNO,
           toggleLabel: item.Status
         }
       }
     })
   };
   

如果你坚持要保留原来的行、单元格生成逻辑不改，就必须把mock数据改成代码要求的结构：每一行必须包含key、toggleText、cells字段，其中cells是对象数组，每个对象必须包含key、title属性，否则加再多条件渲染也解决不了字段缺失的问题。

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