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

Posted 2023-02-22

【中文标题】React：当用户点击市场中的一种产品时显示特定的产品数据

【英文标题】：React : show specific product data when user clicks on one product in the market place

【发布时间】：2021-05-20 14:20:15

【问题描述】：

我已从 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]  /></Link>
                            

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

                      `

【问题讨论】：

这能回答你的问题吗？ Pass props in Link react-router

【参考方案1】：

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

第一步：注册路由

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

第 2 步：链接喜欢

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

第三步：获取商品详情页面组件的参数，如

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

【参考方案2】：

您可以使用动态参数创建路由 <Route path="listing-details-v1/:id" ... /> 然后通过链接传递参数 <Link to=`/listing-details-v1/$item.id`></Link> 然后您可以在详细信息页面中使用 useParams 挂钩捕获它const id = useParams()

【讨论】：

当我在完成上述操作后单击缩略图时，页面就变成了空的。我将 添加到我的 App.js 中，这样做： 和详情页上的这个

你应该在你的路由中添加一个组件。

好的，现在打开产品详情页面，那么我如何在这样做之后使用listing详情页面中的状态：