ReactJS中所有产品详情页显示相同数据的问题求助

你的所有产品详情页显示相同内容，核心原因在于参数匹配不一致、数据源字段不统一、数据类型不兼容这几个问题，以下是具体问题和修复步骤：

核心问题点 #

1. 路由参数名称不统一
   路由配置中路径是/products/:_id，但详情组件里用useParams()获取的是id，跳转链接传递的是item.id，三者名称不匹配，导致无法正确获取当前产品ID。

2. 数据源字段不一致
   第三个产品的ID字段是_id:3，其余产品均为id:数字，字段名不统一，会导致find方法无法匹配到该产品，同时打乱整体匹配逻辑。

3. 数据类型不匹配
   数据源中的ID是数字类型（如id:1），但路由参数通过useParams()获取到的是字符串类型，用===全等比较时，数字与字符串不会相等，导致find方法找不到对应产品。

4. 组件引用不匹配
   路由配置中使用的组件是<SingleProduct />，但你提供的详情组件名称是Item，存在组件导入/命名错误，可能导致路由渲染错误组件。

修复步骤 #

1. 统一路由参数名称 #

修改路由配置、组件参数获取、跳转链接的参数名称为一致的id：

• 路由配置（Index.js）：

  <Route path='/products/:id' element={<SingleProduct />} />
  

• 详情组件保持const { id } = useParams();不变，跳转代码保持to={/products/${item.id}}不变。

2. 统一数据源的ID字段名 #

将第三个产品的_id改为id，确保所有产品ID字段名一致：

{
    id:3, // 替换原来的_id:3
    category:'Set',
    productName:'CleanHits(Set)',
    // 其余字段保持不变
}

3. 处理数据类型不匹配 #

将路由参数转换为数字后再比较（避免隐式转换的风险）：
详情组件修改find逻辑：

const product = items.find((product) => product.id === Number(id));

4. 修正组件引用 #

确保路由使用的组件与定义的组件一致：

• 若详情组件名称是Item，则在路由文件中导入Item并修改路由：

  import Item from './path/to/Item';
  // ...
  <Route path='/products/:id' element={<Item />} />
  

• 或者直接将详情组件名称改为SingleProduct：

  const SingleProduct = () => {
      // 组件内容不变
  }
  export default SingleProduct;
  

额外优化：处理产品不存在的情况 #

在组件中添加判断，避免因找不到产品导致的解构报错：

const Item = () => {
   const { id } = useParams();
   const product = items.find((product) => product.id === Number(id));
   
   if (!product) {
       return <div className={styles.main}>产品不存在</div>;
   }
   
   const { productName, productPrice, description, content, productImage, productImageList } = product;
   
   // 其余渲染内容不变
}

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