Javascript 将数据从一个组件推送到另一个组件

因此，我在支付部分遇到了问题。基本上我想当我按下链接时，它会将（ClassG imageG和PriceG）推到支付组件中，在那里我可以再次设置它们的样式。我尝试了一些东西，但当我点击链接时，它会给我直接的信息（Arayys）。那不是我想要的。如果可能的话，我想要一些帮助。提前谢谢

import React from "react";
import data from "../data.json";
import { Link } from "react-router-dom";

function G() {
  return (
    <div className='bg-black '>
{data.filter(d =>
  d.classG &&
  d.imageG &&
  d.priceG)
  .map((postData) => {
        return (
          <div className='bg-black'  key={postData.id} >
            <div className='bg-black '>            
              <img
                alt=""
                className="w-full object-contain "
                src={postData.imageG}
              ></img>
              <h1 className=" ml-24 mlg:ml-6 mlg:mt-2 mlg:static text-5xl mlg:text-2xl text-blue-400 
               absolute top-48">
                {postData.classG}
              </h1>
              <h1 className="text-lg  mlg:mb-2 mlg:ml-6  mlg:mt-2 mlg:static font-bold text-green-800 
               font-mono ml-24 top-64  absolute" >
                {postData.priceG}
              </h1>
              <Link
                to={`/payment/${postData.id}`}
                className="py-1 px-2  mlg:ml-6 mlg:mt-14 mlg:static text-black-600 h-8  ml-24  top-72 bg- 
                white w-32 text-center text-gray-red
                rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600 absolute" 
              >
                Buy Now
              </Link>
              <div id='New' className="flex flex-col mt-40 justify-center border-white text-center items- 
                center bg-black" >
              <h1 className='tracking-tighter mb-20 text-white text-base md:text-6xl'>What's new in 
                2021</h1>  
              <h1 className=' md:p-4 md:w-2/4 font-sans mb-16 text-white '>{postData.newG} </h1>                  
              </div>   
               </div>
                 </div>
           )
            }
    export default G

json file
[
{
    "id":1,
    "classG":"G-Class",
    "imageG":"./ModImages/Gclass.jpg",
    "priceG":"Starting at $154,900"
    "newE": "some text"

},
]

Payment Component
import React from "react";
import data from "./Models/data.json";
function Payment(props) {
  console.log(props);
  const {
    match: {
    params: { dataId }
    }
  } = props;
  const item = data.find(({ id }) => id === Number(dataId));
  return (
    <div className="ml-20">        
      <pre>{JSON.stringify(item, null, 2)}</pre>
    </div>
  );
}
export default Payment;

App Component
import React,{useState, useEffect} from 'react'
import './assets/main.css'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <div className='' >     
      <div>
          <Router>       
             <Header />     
          <Switch>        
            <Route path="/a">
              <A />
            </Route>
             <Route path="/payment/:dataId" component={Payment}>
             </Route>
           </Switch>  
           </Router>
            </div>
               </div>

  );
}
export default App;

从“React”导入React；
从“./data.json”导入数据；
从“react router dom”导入{Link}；
函数G（）{
返回(
{data.filter（d=>
d、 类别G&&
d、 图像&&
d、 价格（g）
.map（（postData）=>{
返回(
{postData.classG}
{postData.priceG}
立即购买
有什么新鲜事吗
2021
{postData.newG}
)
}
导出默认值G
json文件
[
{
“id”：1，
“G类”：“G类”，
“imageG”：“/ModImages/Gclass.jpg”，
“价格”：“起价154900美元”
“newE”：“一些文本”
},
]
支付部分
从“React”导入React；
从“/Models/data.json”导入数据；
功能支付（道具）{
控制台日志（道具）；
常数{
匹配：{
参数：{dataId}
}
}=道具；
const item=data.find（（{id}）=>id==Number（dataId））；
返回(
{JSON.stringify（item，null，2）}
);
}
出口违约金；
应用程序组件
从“React”导入React，{useState，useEffect}
导入“./assets/main.css”
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
函数App（）{
返回(
);
}
导出默认应用程序；

为了发送特定的产品数据，您可以使用路由转换的路由状态

); }

---

也许我不太理解您的请求，但您没有将任何数据推送到任何地方，您正在将JSON对象导入您的

支付组件中，并通过id查找匹配的元素。您是否尝试通过
链接发送此数据？@Drew Reese是的，我想将数据发送到可以设置img价格和cla样式的位置这不是我想做的，它是传递数据，而是传递整个数据。我想把图片的价格和类别传递给付款，所以我需要以某种方式对其进行过滤。当我通过点击链接进入付款页面时，我想设置图片类别和类别的样式price@Tequila否，它传递一个
postData
 在链接组件
G
中映射的对象。数据对象具有您提到的
imageG
、
priceG
和
classG
属性，需要从这里筛选什么？您现在有了数据，因此您可以决定如何在
支付组件中呈现它。您可以在下面的示例中解释更多信息吗你的问题是，你是如何尝试以不同于JSON的方式呈现这些数据的。字符串化吗？@Drew Reese its dispaying所有信息我在数组中有更多的对象，或者我会说其他类。可能我使用JSON字符串化错误，或者我甚至不需要它。@Tequila啊，我添加了更多的代码来演示如何分解属性你想从传递的对象中得到什么。从那里你可以做任何事情，因为它们只是变量。就像我说的，如果你能更好地解释你想用不同的方式处理这些数据，我可以改进我的答案。你看到了我如何在支付页面中设置img类和价格的链接吗
<Link
  to={{
    pathname: `/payment/${postData.id}`,
    state: {
      postData,
    },
  }}
  className="..." 
>

function Payment(props) {
  const {
    location: {
      state: {
        postData, // <-- access route state from location.state
      },
    },
    match: {
      params: { dataId }
    },
  } = props;

  const {
    classG,
    imageG,
    priceG,
    // ... any other postData object properties
  } = postData;
  
  return (
    <div className="ml-20">        
      <pre>{JSON.stringify(postData, null, 2)}</pre>
    </div>
  );
}