UseParams() 不工作并且不在屏幕上呈现数据

Question

我正在一个电子商务网站上工作，但遇到了困难。我正在通过一个数组进行映射，它呈现 Image 和一个 link 。我想单击图像上的 link(checkitem)，它应该会在不同的页面中打开图像和详细信息，但它不起作用。我正在为其使用 reactrouter 并将图像的 id 传递给我的 Fullcard 组件中的 useparams() 。在我的 Full card 组件中，我正在根据图像的 id 过滤和映射数组，但它似乎不起作用。你们能帮帮我吗？

这是项目的 CodeSandboxLink ：https://codesandbox.io/s/strange-driscoll-gpl629?file=/src/App.js

这是我的 Appjs :

import Hero from './Hero';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import FullCard from "./FullCard";
function App() {

  const data = [
    {
      burh: "1fdsd",
      id: 1,
      img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
    },
    {
      burh: "1fdsd",
      id: 2,
      img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
    },
    {
      burh: "1fdsd",
      id: 3,
      img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
    },
    {
      burh: "1fdsd",
      id: 4,
      img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
    },
  ];




  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hero data={data}/>} />
        <Route path="/products/:id" element={ <FullCard data={data} />} />
      </Routes>
    </Router>
  );
}

export default App;

这是我的名片：

// import { popularProducts } from "./data";
import { Link } from "react-router-dom";
import "./Card.css";

const Card = ({ data }) => {
  return (
    <div className="Maincontainer">
      <div className="CardContainer">
        {data.map((items, index) => {
          return (
            <div className="cards" key={index}>
              <img src={items.img} alt="/" />

              <Link to={`/products/${items.id}`}>CheckItem</Link>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Card;

这是我的全卡组合：

import { useParams  } from 'react-router-dom'

const FullCard = ({data}) => {

    const {id} = useParams();


  return (
    <div className='container'>
        {data.filter(  (items )=> items.id === id ).map((items,index) =>{
            return (
                <div key={items} className="container2">
                    <h1>{items.burh}</h1>
                    {/* <img src={items.image} alt="/" /> */}
                </div>
            );
        })}
    </div>
  )
}

Answer 1

问题

data中的id属性是数字类型，但id路由匹配参数是字符串。 FullCard 中的数据过滤失败，因为您使用的是严格相等，这要求两个操作数的类型相同。在这种情况下，两个数字或两个字符串。

{data
  .filter((items) => items.id === id) // <-- type mismatch comparision
  .map((items, index) => {
    return (
      <div key={items.id} className="container2">
        <h1>{items.burh}</h1>
        {/* <img src={items.image} alt="/" /> */}
      </div>
    );
  })}

解决方案

要么使用松散相等，即 ==，因此尝试输入 coercion/conversion 来确定相等性

.filter((items) => items.id == id)

或者将 items.id 转换为字符串并使用字符串相等性

.filter((items) => String(items.id) === id)

Answer 2

useParams() 工作正常。由于 FullCard 中的 id 是字符串类型，因此您在 FullCard 过滤器中比较类型和值。所以请使用 items.id==id 或 items.id===Number(id).

UseParams() 不工作并且不在屏幕上呈现数据

UseParams() not working and not rendering data on screen

reactjs

react-router-dom

问题

解决方案