React中key={row._id}失效：无法读取MongoDB默认_id属性

你遇到的这个情况我之前也碰到过——明明确认row对象上存在_id，但就是没法在JSX里正常读取它作为key。咱们一步步来排查和解决：

1. 先确认_id的实际类型 #

MongoDB默认的_id是ObjectId对象，而React要求组件的key必须是字符串或数字类型。如果你的row._id还是ObjectId对象，直接用它当key可能会出现读取异常或者React警告。

你可以先在组件里加个日志，确认row的结构和_id的类型：

const ProductTableSingleRow = ({ row, index }) => {
  console.log('Row数据详情:', row); // 看控制台里_id是对象还是字符串
  return (
    // ... 你的JSX代码
  );
};

2. 把ObjectId转为字符串（最常见的解决方案） #

不管_id是ObjectId还是已经是字符串，显式转成字符串都能确保兼容：

const ProductTableSingleRow = ({ row, index }) => (
  <Table.Row key={row._id.toString()}> {/* 这里加toString() */}
    <Table.Cell>{index}</Table.Cell>
    <Table.Cell>{row.brandCode}</Table.Cell>
    <Table.Cell>
      {row.colorName} ({row.colorCode}) - {row.collectionName} ({row.collectionCode})...
    </Table.Cell>
  </Table.Row>
);

3. 排查props传递是否正确 #

虽然你说确认row上有_id，但还是可以再检查父组件的传参：有没有把数据正确传给row这个props？比如父组件是不是写成了<ProductTableSingleRow data={yourRowData} />而不是<ProductTableSingleRow row={yourRowData} />？这种小失误有时候很容易忽略😂

4. 临时测试：用index当key（仅排查用） #

React不推荐用index作为key，但可以临时替换成key={index}测试：如果能正常渲染，那问题肯定出在_id的读取或类型上；如果还是不行，那可能是row本身在传递过程中变成了undefined，这时候就要往上排查数据来源了。

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