如何在反应中使用来自组件的数据加载页面

Question

我是新来的反应，我正在尝试打开一个新页面（想想电子商务网站上的产品页面），当它被点击时，卡组件（产品卡）上的数据。 卡片组件使用. map() . map() 。 您能否就如何实现这一目标提出建议？

Answer 1

好吧，如果您说的另一个页面是使用相同的反应应用程序打开的，您可以使用反应路由器的历史记录，例如：

history.push(to: 'yourpath', state: { the data you need to give to the other page })

但请记住，这在 URL 上不可见，因此用户将无法与该信息共享 URL，另一种实现此功能的方法是使用搜索参数。

像yourwebsite.com/?param=PARAM1这样你就可以用 vanilla JS 来阅读它们。

另一种方法是将参数添加到该新页面的路由中，您可以在其中定义所有路由，例如

<Route path='/yourPath:id'/>

因此，当您单击产品时，您可以使用相应的 ID 将用户发送到该 URL，然后您必须将您的产品存储在可以通过该 ID 找到它们的地方，例如调用 API。 我希望这有帮助。

Answer 2

您可以定义产品 id之类的内容，并通过产品 id 找到您的目标数据，使用 useState 并为产品卡组件设置 [setData,Data] 状态，并使用 onClickHandler 运行一个函数，该函数映射您的 js 文件并使用定义的产品 id 查找目标数据然后更新数据状态