时间戳

首页 > 解决方案 > React ：当用户点击市场中的一种产品时显示特定的产品数据

javascript - React ：当用户点击市场中的一种产品时显示特定的产品数据

问题描述

我已经从 api 获取数据并成功在市场上显示数据。现在，当用户单击一个产品时，它应该打开产品详细信息页面并发送该产品的数据以填充详细信息页面。当单击该产品时，我想将一种产品的特定数据从 Api 传递到产品详细信息页面。请帮忙

这是渲染各种产品的代码

const renderitems = currentitems.map((item) => {
        return <div key={item.id} className="col-md-6">
            <div className="listing">
                <div className="listing-thumbnail">
                    <Link to="/listing-details-v1"><img src={ item.images[0]} alt="listing" /></Link>

我如何将点击链接的 id 传递到详细信息页面

                      `

标签： javascriptreactjsapireact-router

解决方案

就这么简单。您将在路由中将产品 ID 作为参数传递，并将在产品详细信息页面上获取产品 ID。

第 1 步：注册路线，如

<Route path="/listing-details-v1/:id" ..... />

第2步：链接喜欢

<Link to={"/listing-details-v1/" + item.id}><img src={ item.images[0]} alt="listing" /></Link>

第 3 步：获取产品详细信息页面组件上的参数，例如

        import { useParams } from "react-router-dom";
        let { id } = useParams();

推荐阅读