map遍历数组渲染表格时报Cannot read properties of null (reading 'type')错误

架构老林

2026-10-1

报错原因

核心原因是map方法的回调函数语法问题：你使用了带花括号{}的箭头函数写法，但没有显式return需要渲染的JSX元素，导致map最终返回全是undefined的数组。表格组件接收到非法的undefined值，尝试读取其type属性时就会触发该报错。你代码中用逗号运算符连接console.log和JSX的写法，在带花括号的箭头函数作用域下不会自动返回JSX结果，必须手动指定返回值。
潜在问题：你的表头tableHead定义了4列，但是当前行渲染逻辑仅输出了name1个字段，列数不匹配也可能触发表格组件内部异常。

解决方法

修正map的返回逻辑，两种修正方式二选一即可：

// 方式1：去掉花括号，使用箭头函数隐式返回，可保留现有逗号运算符写法
{
  this.state.tableData.value.map((rowData, index) => (
    console.log('test', rowData),
    <TableWrapper key={index} style={styles.row}>
      {
        rowData.map((item, idx) => (
          console.log('item', item.name),
          <Text textStyle={styles.text} key={idx}>{item.name} </Text>
        ))
      }
      {/* 补全剩余列的渲染逻辑，和表头4列对齐 */}
    </TableWrapper>
  ))
}

// 方式2：保留花括号，添加显式return语句
{
  this.state.tableData.value.map((rowData, index) => {
    console.log('test', rowData)
    return (
      <TableWrapper key={index} style={styles.row}>
        {
          rowData.map((item, idx) => {
            console.log('item', item.name)
            return <Text textStyle={styles.text} key={idx}>{item.name} </Text>
          })
        }
        {/* 补全剩余列的渲染逻辑，和表头4列对齐 */}
      </TableWrapper>
    )
  })
}