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

Question

我已从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传递到详细信息页面

                      `

Answer 1

在"listing-filets-v1"页面中，您可以声明一个useState。然后使用useEffects，您可以映射“当前项目”以获取“项目”id，并在“if”条件中，如果item.id与从useParams中解构的“id”匹配，则setState“项目”。

const details, setDetails = useState([]);
const {id} = useParams(); //import from react-router-dom


useEffect(() => {
    const getDetails = currentitems.map((item) => {
      if (item.id === id) {
        return setDetails(item);
      }
    });
  }, [id]);

 return (
     <>
        <h1>{details.title}<h1/>
     </>
    )

Answer 2

您可以使用动态参数创建路由

Answer 3

很简单。您将传递产品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();