React动态路由传值失败，求助修正filter函数用法

常见问题及修复步骤 #

1. 路由参数与数据ID类型不匹配 #

通过useParams()获取的路由id默认是字符串类型，如果你的data.json中商品ID是数字类型，直接用===匹配会完全失败。

修复方式：将路由参数转为数字，统一匹配类型：

import { useParams } from 'react-router-dom';
import data from './data.json';

function Products() {
  const { id } = useParams();
  // 把字符串id转为数字类型
  const product = data.filter(item => item.id === parseInt(id))[0];
  
  if (!product) return <div>商品不存在</div>;
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

2. 用find替代filter更高效 #

filter会返回所有匹配项的数组，而我们只需要单个商品，用find直接返回第一个匹配元素，更贴合需求：

const product = data.find(item => item.id === Number(id));

3. 确认卡片跳转的路由参数正确 #

检查Cards.jsx中的跳转链接是否正确传递了商品ID：

import { Link } from 'react-router-dom';

function Cards() {
  return (
    <div className="card-list">
      {data.map(item => (
        <Link key={item.id} to={`/products/${item.id}`}>
          <div className="card">
            <h3>{item.name}</h3>
            <img src={item.image} alt={item.name} />
          </div>
        </Link>
      ))}
    </div>
  );
}

4. 增加商品不存在的边界处理 #

当匹配不到对应商品时，提前返回提示，避免页面报错：

if (!product) {
  return <div className="not-found">该商品不存在或已下架</div>;
}

完整修改后的Products.jsx示例 #

import { useParams } from 'react-router-dom';
import data from './data.json';

export default function Products() {
  const { id } = useParams();
  // 统一类型并查找单个商品
  const product = data.find(item => item.id === Number(id));

  if (!product) {
    return <div>商品不存在</div>;
  }

  return (
    <div className="product-detail">
      <h1>{product.title}</h1>
      <img src={product.image} alt={product.title} />
      <p>{product.description}</p>
      <p>价格: ${product.price}</p>
    </div>
  );
}

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