Json 使用Chart.js和React进行数据交换

我在这里设置了许多配置文件。这称为Profiles.js

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'
          title = 'Kim_Kardashian'
          //path='/analysis'
        />
        <ProfileItems
          src='images/TheRock.jpg'
          text='The Rock - Zoa Energy Drink'
          label='Pressional Wrestler & Actor'
          title = 'The_Rock'
          //path='/'
        />
      </ul>
      <ul className='profile__items'>
        <ProfileItems
          src='images/Ronaldo.jpg'
          text='Cristiano Ronaldo - Portugal Team'
          label='Professional Soccer Player'
          title = "Cristiano_Ronaldo"
          //path='/'
        />
        <ProfileItems
          src='images/Kylie.jpg'
          text='Kylie Jenner - Kylie Cosmetics'
          label='Social Media Influncer'
          title = "Kylie_Jenner"
          //path='/'
        />
        <ProfileItems
          src='images/Elon.jpg'
          text='Elon Musk - Tesla'
          label='CEO'
          title = "Elon_Musk"
          //path='/'
        />
        <ProfileItems
          src='images/Jeffree.jpg'
          text='Jeffree Star - Jeffree Star Cosmetics'
          label='Beauty Guru'
          title = "Jeffree_Star"
          //path='/'
        />
      </ul>
    </div>
  </div>
</div>
);
}

export default profile;

url中的+句柄很重要，因为这将专门请求celeb句柄，并从数据库返回该celeb句柄下的数据。我需要这是请求时，配置文件被单击。因此，如果句柄正在请求/kyliejenner，它将返回具有该句柄名称的数据。我只是不知道如何在点击不同的配置文件并将其显示到Analysis.js文件时切换数据

如果你需要澄清，请告诉我

import React from 'react'
import { useParams } from "react-router-dom";
import PostData from '../data/posts.json';
import '../styles/Analysis.css';
import Navbar from '../components/Navbar';
//import Footer from '../components/Footer';
import Graphs from "../components/Graphs";


export default function Analysis() {

const { title } = useParams();
const profiles = PostData.filter(profiles => profiles.title === title);

return (
  <div>
    
    {<Navbar/>}
           {profiles.map(pr => (
                <div key={pr.id}>
                    
                    <img class = "banner" src = {pr.banner} alt = "banner"/>
                    <h1 class = "celebName">{pr.title}</h1>
                    <p class = "description">{pr.content}</p>
                    <a class = "handle" href= {pr.handlelink}>{pr.handle}</a>
                    <p class = "disclaimer">{pr.disclaimer}</p>
                    <img class = "celebPic" src = {pr.img} alt = "celebPic"/>
                    

                    {/* <div>
                    <img class = "mood" src = "/images/positive.jpg" alt = "smiley"/>
                    </div> */}
                    {<Graphs/>} 
                     
                </div>
            ))}
            
        </div>
    )

   }

import React from 'react';
import {
PieChart,
Pie,
Tooltip,
BarChart,
XAxis,
YAxis,
Legend,
CartesianGrid,
Bar,
} from "recharts";
import '../styles/Graphs.css';
import axios from 'axios';
import PostData from '../data/posts.json';

const Graphs = () => {
const handle = PostData.handle; 
axios.get('http://localhost:5000/celebs/' + handle)
.then(response => {
  console.log(response)
  this.setState({ celeb: response.data })
})
.catch((error) => {
  console.log(error);
})

const data = [
{ name: "Positive", users: 2000000000 },
{ name: "Negative", users: 1500000000 },

];

return (
<div style={{ textAlign: "center" }}>
  <div class = "Graph">
    <PieChart width={600} height={600}>
      <Pie
        dataKey="users"
        isAnimationActive={false}
        data={data}
        cx={200}
        cy={200}
        outerRadius={179}
        fill="#ff38f5"
        label
      />
      <Tooltip />
    </PieChart>
    <BarChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 80,
        bottom: 5,
      }}
      barSize={20}
    >
      <XAxis
        dataKey="name"
        scale="point"
        padding={{ left: 10, right: 10 }}
      />
      <YAxis />
      <Tooltip />
      <Legend />
      <CartesianGrid strokeDasharray="3 3" />
      <Bar dataKey="users" fill="#8884d8" background={{ fill: "#eee" }} />
    </BarChart>

  </div>
</div>
);
};

export default Graphs;

[ 
{
    "id": 1,
    "title": "Kylie_Jenner",
    "content": "Social Media Public Figure",
    "disclaimer": "*Disclaimer: This user may have comment filtering turned on",
    "slug": "hello-world",
    "img" : "https://ilarge.lisimg.com/image/16801290/1080full-kylie-jenner.jpg",
    "banner" : "https://i.pinimg.com/originals/a5/2b/96/a52b963809c7e64e538b113cccf61dda.jpg",
    "handle": "kyliejenner",
    "handlelink" : "https://www.instagram.com/kyliejenner/"
},
{

"id": 2,
"title": "Kim_Kardashian",
"content": "Social Media Public Figure",
"disclaimer": "*Disclaimer: This user may have comment filtering turned on",
"slug": "hello-world",
"img": "https://i.pinimg.com/originals/e9/1a/33/e91a3373b55e59368527f063e363daee.jpg",
"banner" : "https://cdn.shopify.com/s/files/1/0328/0021/articles/kim_kardashian_banner5-01_1024x1024.jpg?v=1525140572",
"handle": "kimkardashian",
"handlelink" : "https://www.instagram.com/kimkardashian/"
}
]