Javascript 使用.find（）方法在productId上查找productId作为参数单击

现在，我在match.params.id处获取productId，但是当我使用find方法比较item.id和match.params.id时，它返回了找不到的产品…下面是代码

const DetailsPage = (props) => {
    console.log(props.match.params.id)
    const product = data.products.find((item) => item.id === props.match.params.id)
    console.log(product);
    if (!product) {
        return (
            <h1>Product Not Found</h1>
        )
    }
    return (
        <div>
            DetailsPage
                {product.name}
        </div>
    )

const DetailsPage=（道具）=>{
console.log（props.match.params.id）
const product=data.products.find（（item）=>item.id==props.match.params.id）
控制台日志（产品）；
如果（！产品）{
返回(
找不到产品
)
}
返回(
详细信息
{product.name}
)

---

如您所见，我console.log（props.match.params.id）为我提供了产品参数id，但在我的函数声明中不存在任何内容，这是因为从路由检索到的id将是

字符串类型的
。由于您正在执行
==
严格等于查找操作，因此将失败

您可以将params.id键入cast to
Number

const product = data.products.find((item) => item.id === Number(props.match.params.id))

另外，
react router
现在提供了一个
useparms
钩子来检索参数

let { id } = useParams();