如何在每次单击 .map 项目列表中的每个项目时呈现不同的数据？答案

【问题标题】：How to render different data every time upon clicking each item from a list of .map items?如何在每次单击 .map 项目列表中的每个项目时呈现不同的数据？
【发布时间】：2020-09-19 10:43:34
【问题描述】：

这个问题本身就很令人困惑，但我想要实现的是我在数据库中有三个餐厅数据，我通过在餐厅名称列表上调用 .map 方法在三张卡片上显示他们的名字，现在我想做一些事情，比如每当有人点击一张卡片时，它就会将他带到一个页面，在那里他可以找到有关该特定餐厅的所有信息，这是菜肴并且应该能够对它们进行评分，那么这个路由是如何发生的？我是否必须创建三个单独的页面，但是如果我有三个以上的页面会变得一团糟怎么办？或者有一种方法可以在点击不同的卡片时动态显示不同的数据？供您参考，我在这个项目中使用了 MERN Stack。

【问题讨论】：

如果您使用 React，这绝对是可能的，只需创建一个通用组件并将数据作为道具传递。如果您可以提供您为此编写的任何代码，我们将能够帮助您更快地解决问题:)
使用 react-router，您可以将可点击的餐厅卡片包装在 <Link> 组件中。您传递一个 ID 或名称或标识您的餐厅的东西（理想情况下是数据库中的主键）。然后添加一个以该 ID 作为参数的 <Route> 组件。这将是一个显示餐厅详细信息的通用组件。然后点击一张卡片将前往该路线。也许在尝试之前阅读 react-router 教程。

标签： javascript reactjs routes react-router

【解决方案1】：

不，您不必创建单独的页面，您只需要创建一个 detailsPage 组件并传递包含您点击的卡片详细信息（餐厅）的所需道具。

所以基本上你将首先在你的组件中初始化一个本地状态对象，它会显示这样的卡片：

this.state = {
  restaurantName : '',
  restuarantId: '',
  showDetails: false,
}

然后将卡片上的点击处理程序绑定到一些函数，例如：

const onCardClick = (id,name) => {
   this.setState({
    showDetails: true,
    restuarantName: name,
    restaurantId: id
  })
}

现在在您的渲染方法中，只需使用 if 条件渲染您的详细信息组件，以便它仅在 showDetails 设置为 true 时显示，并且它会收到适当的 id 和名称

return(){
  .....
  // your previous code
.....
    {
        this.state.showDetails && 
         <DetailsPage id=this.state.id name=this.state.name />
    }
  }

注意：如果您想将详细信息页面显示为弹出窗口或卡片下方，则上述方式很有用，如果您想路由到新页面，则可以进行条件路由，但想法与您创建的相同单个组件并向其传递适当的道具。

【讨论】：