React TypeScript中数组props传递后被识别为对象导致map报错如何解决

• React函数组件的第一个入参永远是props对象，你直接将子组件的入参类型定义为TableViewRowProps[]本身就不符合React的组件规则。
• 父组件调用子组件时错误使用了展开运算符：<TableViewContentList {...props.content} />会把数组的每一项按索引作为key，展开为子组件props对象的属性，比如原数组是[row1, row2]，子组件最终拿到的props是{0: row1, 1: row2}的普通对象，自然没有数组的map方法。

1. 修改父组件的传参方式，将数组作为props的一个属性传递：

// 把原来的展开写法改成直接传content属性
<TableViewContentList content={props.content} />

2. 调整子组件的类型定义和取值逻辑，从props对象中取出content数组再操作：

// 先定义子组件的props类型
interface TableViewContentListProps {
  content: TableViewRowProps[]
}

export const TableViewContentList = (props: TableViewContentListProps) => {
  console.log('type of content is: ', typeof(props.content), props.content)
  // 从props中取出content数组调用map
  const tableViewContents = props.content.map((row, index) => {
    // 注意：列表项需要添加唯一key属性，避免React警告
    console.log('row', row)
    // 这里替换为你实际要渲染的行组件
    return <div key={index}>{/* 行渲染逻辑 */}</div>
  })

  return (
    <div id="tableview-content-list">
      {tableViewContents}
    </div>
  )
}

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