如何从 onClick 获取特定数据并将其显示到 React 中的另一个页面答案

【问题标题】：How to get and display specific data from onClick into another page in React如何从 onClick 获取特定数据并将其显示到 React 中的另一个页面
【发布时间】：2021-07-07 01:43:02
【问题描述】：

所以我目前正在处理一个反应项目，我正在尝试弄清楚如何从单击的按钮/配置文件中获取特定数据，然后将其显示到另一个页面上。

这是我目前拥有的。这是当前显示在主页上的不同名人的个人资料列表。每个都显示为您可以单击的个人资料卡。

import React from 'react';
import '../styles/Profile.css';
import ProfileItems from '../components/ProfileItems';

function profile() {
return (
<div className='profile'>
  <h1>Choose A Profile</h1>
  <div className='profile__container'>
    <div className='profile__wrapper'>
      <ul className='profile__items'>
        <ProfileItems
          src='images/KimK.jpg'
          text='Kim Kardashian - Skims'
          label='Social Media Influncer'
          path='/'
        />
        <ProfileItems
          src='images/TheRock.jpg'
          text='The Rock - Zoa Energy Drink'
          label='Pressional Wrestler & Actor'
          path='/'
        />
      </ul>
      <ul className='profile__items'>
        <ProfileItems
          src='images/Ronaldo.jpg'
          text='Cristiano Ronaldo - Portugal Team'
          label='Professional Soccer Player'
          path='/'
        />
        <ProfileItems
          src='images/Kylie.jpg'
          text='Kylie Jenner - Kylie Cosmetics'
          label='Social Media Influncer'
          path='/'
        />
        <ProfileItems
          src='images/Elon.jpg'
          text='Elon Musk - Tesla'
          label='CEO'
          path='/'
        />
      </ul>
    </div>
  </div>
</div>
);
}

export default profile;

现在对于这些配置文件中的每一个，当它们被点击时，我希望它们被专门路由或设置到具有各自数据的另一个页面的路径。例如，我有这个 JSON 文件，其中包含有关 Kylie Jenner 和 Kim Kardashian 的信息。因此，当我单击 Kylie Jenner 的个人资料时，我希望从 JSON 文件中提取数据，并且只提取 Kylie 的数据并将该数据显示在我设置为“分析页面”的另一个页面上。

[ 
{
    "id": 1,
    "title": "Kylie Jenner",
    "content": "Social Media Public Figure",
    "disclaimer": "*Disclaimer: This user could have comment filtering turned on",
    "slug": "hello-world",
    "img" : "https://ilarge.lisimg.com/image/16801290/1080full-kylie-jenner.jpg"
},
{
    "id": 2,
    "title": "Kim Kardashian",
    "content": "Social Media Public Figure",
    "disclaimer": "*Disclaimer: This user could have comment filtering turned on",
    "slug": "hello-world",
    "img" : ""
}

]

金·卡戴珊等另一位名人也是如此。因此，当我单击 Kim 的个人资料时，只会从 JSON 文件中提取她的数据。一旦被拉出，我希望它显示在我在下面设置的“分析页面”上。

import React, { Component } from 'react'



export class Analysis extends Component {
render() {
    return (
        <div>
           
        </div>
    )
}
}

export default Analysis

我相信我必须设置一个 onClick 函数，但我只是对如何/在何处设置该 onClick 函数以获取特定数据感到困惑。然后路由配置文件并将其显示到另一个页面上。如果有人可以指导我或提出更简单的方法，请告诉我。将不胜感激。

【问题讨论】：

标签： json reactjs get display

【解决方案1】：

您需要使用react-router-dom 在道具中传递名人姓名（在您的情况下为头衔）。然后，在您的分析页面中，使用道具从数据库中检索相关信息。

在这里查看我的演示：https://stackblitz.com/edit/react-gkpswn?file=src%2FApp.js

ProfileItems.js

// Link to analysis route with title in props
<Link to={`/analysis/${title}`}>

App.js

// Route to analysis page/component with title props
<Route path="/analysis/:title" render={props => <Analysis {...props} />} />

Analysis.js

  // Get the props with useParams (react-router-dom)
  const { title } = useParams();

  // filter data to get informations based on props "title"
  const profile = Data.filter(profile => profile.title === title);

【讨论】：