React项目无法渲染JSON图片/信息，链接ID显示undefined求助

控制台无报错，操作流程看似正确，但点击产品图片或标题链接时，地址栏中的产品ID显示为undefined。已添加key prop但问题未解决，且确认images文件夹位于public目录下。

HomeScreen.js #

import React from "react";
import products from "../../products";
import { Row, Col } from "react-bootstrap";
import Product from "../Product";

function HomeScreen() {
  return (
    <div>
      <h1 className="text-center">Latest Products</h1>
      <Row>
        {products.map((product) => (
          <Col key={product.id} sm={12} md={6} lg={4} xl={3}>
            {/* <h3>{product.name}</h3> */}
            <Product product={product} />
          </Col>
        ))}
      </Row>
    </div>
  );
}

export default HomeScreen;

Product.js #

import React from "react";
import { Card } from "react-bootstrap";

function Product(product) {
  return (
    <Card className="my-3 p-3 rounded">
      <a href={`/product/${product.id}`}>
        <Card.Img src={product.image} />
      </a>

      <Card.Body>
        <a href={`/product/${product._id}`}>
          <Card.Title as="div">
            <strong>{product.name}</strong>
          </Card.Title>
        </a>
        <Card.Text as="div">
          <div className="my-3">
            {product.rating} from {product.numReviews} reviews
          </div>
        </Card.Text>
        <Card.Text as="h3">$ {product.price}</Card.Text>
      </Card.Body>
    </Card>
  );
}

export default Product;

products.js #

// prettier-ignore
const products = [
  {
    "id": "1",
    "name": "Airpods Wireless Bluetooth Headphones",
    "image": "/images/airpods.jpg",
    "description": "Bluetooth technology lets you connect it with compatible devices wirelessly High-Quality AAC audio offers immense experience Built-in microphone allows you take calls while working",
    "brand": "Apple",
    "category": "Electronics",
    "price": 89.99,
    "coutInStock": 0,
    "rating": 4.5,
    "numReviews": 12,
  },
  {
    "id": "2",
    "name": "IPhone 11 Pro 256GB memory",
    "image": "/images/phone.jpg",
    "description": "Bluetooth technology lets you connect it with compatible devices wirelessly High-Quality AAC audio offers immense experience Built-in microphone allows you take calls while working",
    "brand": "Apple",
    "category": "Electronics",
    "price": 599.99,
    "coutInStock": 7,
    "rating": 4.0,
    "numReviews": 8,
  },
  {
    "id": "3",
    "name": "Cannon EOS 80D DSR Camera",
    "image": "/images/camera.jpg",
    "description": "Bluetooth technology lets you connect it with compatible devices wirelessly High-Quality AAC audio offers immense experience Built-in microphone allows you take calls while working",
    "brand": "Cannon",
    "category": "Eelectronics",
    "price": 929.99,
    "coutInStock": 5,
    "rating": 43,
    "numReviews": 12,
  },
  {
    "id": "4",
    "name": "Sony Playstation 4 Pro White Version",
    "image": "/images/playstation.jpg",
    "description": "The ultimate entertainment center starts with PLaystation. Wether you are into faming, HD movies, television or music",
    "brand": "Sony",
    "category": "Eelectronics",
    "price": 399.99,
    "coutInStock": 11,
    "rating": 5,
    "numReviews": 12,
  },
  {
    "id": "5",
    "name": "Logitech G-Series gaming Mouse",
    "image": "/images/mouse.jpg",
    "description": "Get a better handle on your games with this Ligoitech Lighstick gaming mouse. Th esicth proggamable buttons allow customization for a smooth playing experience.",
    "brand": "Logitech",
    "category": "Eelectronics",
    "price": 49.99,
    "coutInStock": 7,
    "rating": 3.5,
    "numReviews": 10,
  },
  {
    "id": "6",
    "name": "Amazon Echo Dot 23rd Generation",
    "image": "/images/alexa.jpg",
    "description": "Meet Echo Dot, our most popular smart speaker with a fabric design. It is our most compact smart speaker taht fits perfectly into small spaces.",
    "brand": "Amazon",
    "category": "Eelectronics",
    "price": 29.99,
    "coutInStock": 0,
    "rating": 0,
    "numReviews": 12,
  },
];

export default products;

问题原因与修复方案 #

1. 组件props接收错误 #

Product组件的参数写错了：父组件传递的是product属性，但你把函数参数直接写成product，实际上这个参数是整个props对象，不是目标产品数据。所以你访问的product.id其实是props.id，而props里没有这个字段，自然返回undefined。

修复方法：解构props，取出里面的product数据：

// 修改Product组件的定义
function Product({ product }) {
  // 后续代码不变
}

2. 错误使用_id字段 #

在Product组件的标题链接里，你写了product._id，但产品数据里只有id字段，没有_id，这也会导致undefined问题，需要统一改成product.id：

// 标题链接修改为
<a href={`/product/${product.id}`}>

修复后的Product.js完整代码 #

import React from "react";
import { Card } from "react-bootstrap";

function Product({ product }) {
  return (
    <Card className="my-3 p-3 rounded">
      <a href={`/product/${product.id}`}>
        <Card.Img src={product.image} />
      </a>

      <Card.Body>
        <a href={`/product/${product.id}`}>
          <Card.Title as="div">
            <strong>{product.name}</strong>
          </Card.Title>
        </a>
        <Card.Text as="div">
          <div className="my-3">
            {product.rating} from {product.numReviews} reviews
          </div>
        </Card.Text>
        <Card.Text as="h3">$ {product.price}</Card.Text>
      </Card.Body>
    </Card>
  );
}

export default Product;

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