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

Question

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

Answer 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 />

    }

  }

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