React项目中无法获取props.items内模板对象id的问题排查

1. 「key prop警告」与「props.id undefined」的根源排查 #

这两个问题大概率是同一原因导致：后端返回的loadedTemplates数组中，每个template对象的唯一标识字段要么不存在，要么字段名不是id。

验证数据结构 #

在FormList组件的map循环中添加日志，打印每个template的完整结构，确认字段情况：

{props.items.map((template) => {
  console.log("当前template对象：", template); // 查看控制台输出的对象结构
  return (
    <FormItem
      key={template.id}
      id={template.id}
      price={template.price}
      // 其他字段
    />
  );
})}

重点查看：

• 每个template是否包含唯一标识字段（常见如id/_id/templateId）
• 该字段的具体名称（比如MongoDB通常返回_id而非id）

修正字段匹配 #

如果发现后端返回的标识字段是_id（或其他名称），修改FormList中的传参：

<FormItem
  key={template._id} // 用正确的唯一标识作为key
  id={template._id} // 传递正确的标识给FormItem
  price={template.price}
  // 其他字段
/>

此时FormItem中的props.id就能正常获取值，同时key警告会自动消失——因为每个key变成了唯一的有效值。

2. 确认FormItem的props接收逻辑 #

如果数据结构无问题，检查FormItem组件的定义：

• 若使用解构语法，确保正确包含id：

const FormItem = ({ id, price, category, adStatus, numberOfRooms, metreSquare, location }) => {
  // ...组件逻辑
};

• 若直接使用props对象，可打印props确认是否包含id：

const FormItem = (props) => {
  console.log("FormItem props：", props); // 验证props是否携带id字段
  // ...组件逻辑
};

注意避免拼写错误（比如把id写成ID或templateId）。

3. 跳转逻辑的补充 #

当id能正常获取后，在handleTemplateClick中即可正确拼接跳转路径：

const handleTemplateClick = () => {
  // 假设使用react-router的useNavigate
  navigate(`/pages/${pageId}/${props.id}`);
};

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