使用useParams开发复用组件时ID传递显示Undefined的问题求助

问题描述 #

首次接触React路由，尝试使用useParams创建可复用组件，但始终无法传递ID，控制台显示Undefined，不清楚值未传递的原因，附上相关代码寻求帮助。

相关代码 #

card.jsx #

import React from 'react';
import { useNavigate, Link} from 'react-router-dom';

const Card = (props) => {
  console.log(props.title)

  return (
    <div>
      <h2>{props.id}</h2>
      <h2>{props.title}</h2>
      <p>{props.price}</p>
      <Link to={`/cards-details/${props.id}`}>
              <p>Buy Now</p>
            </Link>
    </div>
  );
}

export default Card;  

cardDetails.jsx #

import React from 'react';
import { useParams } from 'react-router-dom';
import cardData from './cardData';

function CardDetails(props) {
  const {id} = useParams()
  console.log(props.key)
  
  const selectedCard = cardData.find(card => card.id === id);
  return (
    <div>
      <h1>{id}</h1>
    </div>
  );
}

export default CardDetails;

cardwrapper.jsx #

import React, { useState } from 'react';
import Card from './Card';
import CardDetails from './CardDetails';

function CardWrapper({ cards }) {
  return (
    <div className='grid grid-cols-4 place-items-center'>
      {cards.map(card=> (
        <Card key={card.id} title={card.title} price={card.price} />
      ))}
    </div>
  );
}

export default CardWrapper;

app.jsx #

function App() {
  const [open, setopen] = useState(true)

  return (
    <>
    <div className="">
     <Router>
      { open &&
       <>
       <Banner />
          <Navbar />
       </>
      }
        <Routes>
          <Route path='/' element={<Home funcNav={setopen}/>}/>
          <Route path='/auth' element={<Auth funcNav={setopen}/>}/>
          <Route path='/cart' element={<Cart />}/>
          <Route path='/sale' element={<All />}/>
          <Route path='/about' element={<About />}/>
          <Route path='/faq' element={<Faq />}/>
          <Route path ='/register' element={<Register />}/>
          <Route path = "/cards-details/:id" element={<CardDetails/>}/>
        </Routes>
      </Router>
    </div>
    </>
  )
}

export default App

问题排查与修复 #

核心问题1：Card组件未接收到id属性 #

在CardWrapper中渲染Card组件时，仅传递了title和price，没有传递id，导致Card组件内的props.id为undefined，最终生成的跳转链接是/cards-details/undefined，所以CardDetails中useParams()拿到的id自然也是undefined。

修复方法：
修改CardWrapper中的map渲染逻辑，给Card组件添加id属性：

{cards.map(card=> (
  <Card key={card.id} id={card.id} title={card.title} price={card.price} />
))}

潜在问题2：ID类型不匹配 #

如果你的cardData中id是数字类型，而useParams()获取到的id是字符串类型，那么find方法中的全等比较card.id === id会失败，导致selectedCard为undefined。

修复方法：
在CardDetails中将获取到的id转换为数字类型：

const { id } = useParams();
const numericId = Number(id);
const selectedCard = cardData.find(card => card.id === numericId);

验证效果 #

修改完成后，Card组件内的props.id会正确显示卡片ID，点击“Buy Now”跳转后，CardDetails中的id会显示对应数值，selectedCard也能正确匹配到对应数据。

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