使用useParams时数组过滤/映射失效，product/:id页面无商品图片显示问题

核心问题 #

useParams 返回的路由参数是字符串类型，和数据源中数字类型的id全等于比较永远为false
你在ProductScreen中执行product.id === id判断时，左侧是数字类型的商品id（1/2/3/4），右侧是字符串类型的路由参数（"1"/"2"/"3"/"4"），全等判断不成立，filter返回空数组，map没有可渲染的内容，最终只显示空div。

修复步骤 #

• 第一步：将路由获取的id转换为数字类型，同时可以用find替代filter+map简化代码（商品id唯一，无需过滤数组，直接查找单个商品即可）
  完整修改后的ProductScreen代码如下：

  import React from 'react'
  import { Link, useParams } from 'react-router-dom'
  import { Row, Col, Image, ListGroup, Card, Button } from 'react-bootstrap'
  import products from '../products'
  import Product from '../components/Product'
  
  
  const ProductScreen = () => {
      const { id } = useParams()
      // 转换id为数字类型，查找对应商品
      const currentProduct = products.find(product => product.id === Number(id))
    
      return (
      <>
            <Link className='btn btn-light my-3' to='/'>
                GO BACK
            </Link>
                <div>
                <Row>
                  <Col md={8}>
                  {/* 匹配到商品才渲染 */}
                  {currentProduct && (
                        <div>
                            {/* 加fluid属性让图片自适应容器宽度 */}
                            <Image src={currentProduct.image} alt={currentProduct.name} fluid />
                        </div>
                  )}
                  </Col>
                  <Col md={4}></Col>
                 </Row>
                </div>
      </>
    )
  }
  
  export default ProductScreen
  

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