Reactjs 使用useContext在详细信息页面上显示数据

我正在尝试使用上下文和路由在我的详细信息页面上显示数据。这是我的密码：

import React, { useContext, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { ProductContext } from "../contexts/ProductContext";

export const ProductDetail = (route) => {
  const [data, setData] = useState("");
  const { product } = useContext(ProductContext);
  const currentProductId = route.match.params.id;

  useEffect(() => {
    const productId = currentProductId;
    const selectedProduct = product[0].products.find((item) => item.id === productId);

    setData(selectedProduct);

    console.log(product[0].products);
    console.log("id", productId);
    console.log("selected product:", selectedProduct);

    // eslint-disable-next-line
  }, []);

  return (
    <>
      {data.id}
      <Link to="/">Back</Link>
    </>
  );
};

export default ProductDetail;

---

productId

返回正确的id，但

selectedProduct

返回未定义的id。我做错了什么？提前感谢

aa我刚刚意识到我自己犯了一个愚蠢的错误…应该是

parseInt（productId）

而不是

productId

。谢谢你给我指出了正确的方向。

const-ProductDetail=（route）

这里，

route

不是

route

，而是

props

对象。你的意思是

constproductdetail=（{route}）

这是打字错误吗？因为您说过“

productId

返回正确的id”。否。如果我这样做（{route}），我会得到：TypeError:无法读取undefinedOk的属性'match'，因此您只是将

道具命名为
route
。这让我很困惑，对不起。然后只需检查
productId
。您在登录时看到了什么？这是路径：
http://localhost:3000/detail/2
…并且记录的
productId
是2…由于某种原因，
selectedProduct
部分不起作用是的，我正在考虑，但首先我想看看输出是什么。我很高兴你解决了这个问题。
(3) [{…}, {…}, {…}]
0: {id: 1, image: "./images/h95.jpg", title: "H95", …}
1: {id: 2, image: "./images/e8.jpg", title: "E8", …}
2: {id: 3, image: "./images/h4.jpg", title: "H4", …}
length: 3