React组件遍历对象数组渲染失败：map方法无效问题排查

1. 类型定义错误（核心原因） #

你在FruitsStatus接口里把fruits定义成了Record<string, string>，这表示它是一个键为字符串、值为字符串的普通对象，但你实际传入的是对象数组。只有数组才有map方法，普通对象没有该方法，因此调用props.fruits.map会直接报错。

正确的接口定义应该明确fruits是对象数组类型：

// 先定义单个水果的类型
export interface FruitItem {
  value: string;
  status: string;
}

export interface FruitsStatus { 
  fruits: FruitItem[];
}

2. JSX结构不合法 #

React组件的return语句中，不能直接返回多个同级的<tr>元素，必须将它们包裹在一个合法的容器内（比如<tbody>，因为<tr>必须嵌套在<table>相关的容器中）：

const Fruits: (props: FruitsStatus) => JSX.Element = props => {
  return (
    <tbody>
      {props.fruits.map((fruit, index) => {
        return (
          <tr key={index}>
            <td>{fruit.value}</td>
            <td>{fruit.status}</td>
          </tr>
        );
      })}
    </tbody>
  )
}

额外提示 #

尽量避免使用数组索引作为key，如果你的水果数据有唯一标识（比如id字段），使用唯一标识作为key会让组件渲染更稳定。

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