[英]React Router passing data from one component to another
So I have a problem with passing data from one Component to another.所以我在将数据从一个组件传递到另一个组件时遇到问题。 So I have Free To Play Component which has is taking freetoplay array from json and displaying it.所以我有免费播放组件,它从 json 获取免费播放数组并显示它。 I have also a Link which should open up a Payment Route and pass the data, In the Payment I have a filter function, which is fitering objects based on their id, Anyway when I press on the Link, it should display the image class and price, but it does not, I dont know why.我还有一个链接,它应该打开一个支付路径并传递数据,在支付中我有一个过滤器 function,它根据对象的 ID 过滤对象,无论如何,当我按下链接时,它应该显示图像 class 和价格,但它没有,我不知道为什么。 If anyone could help me I would be very grateful.如果有人可以帮助我,我将不胜感激。 Cheers干杯
import React from 'react'
import { useParams, Link } from "react-router-dom";
import data from "../data.json";
function Payment() {
const { productId } = useParams();
const filteredData = data.filter((product) => product.id === productId)[0];
return (
<div className='Payment'>
<img src={filteredData.image}></img>
<h1>{filteredData.price}</h1>
<h1>{filteredData.name}</h1>
</div>
)
}
export default Payment
import React from 'react'
import data from "./data.json";
import {
Link
} from "react-router-dom";
import { SearchContext } from './SearchContext';
function FreeToPlay() {
const {filterProduct}=React.useContext(SearchContext);
return (
<>
<div className='All' >
{data[0].freetoplay.filter(filterProduct).map((product) => {
return (
<div className='f2p' key={product.id}>
<img src={product.image}></img>
<h2>{product.name}</h2>
<h5>{product.price}</h5>
<Link
to={`/payment/${product.id}`}
className='link'
>
Buy Now
</Link>
</div>
);
})}
</div>
</>
);
}
export default FreeToPlay
json
[
{
"freetoplay": [{
"id": "0",
"image": "src=fsdf",
"price": "60$",
"name": "CS Go"
},
{
"id": "1",
"image": "src=fsdf",
"price": "6$",
"name": "Fifa"
}
],
"action": [{
"id": "2",
"image": "src=fsdf",
"price": "60$",
"name": "doom"
},
{
"id": "3",
"image": "src=fsdf",
"price": "66$",
"name": "cyberpunk"
}
],
}
]
this is the Route
<Route path="/payment/:productId">
<Payment/>
</Route>
It looks like your issue might be in the handling of your data.filter
in the Payment
component.看起来您的问题可能出在Payment
组件中处理您的data.filter
上。
You use:你用:
const filteredData = data.filter((product) => product.id === productId)[0];
But your data imported from data.json
is an object, not an array.但是从data.json
导入的数据是 object,而不是数组。
You must have meant either:您的意思一定是:
const filteredData = data.action.filter((product) => product.id === productId)[0];
Or:或者:
const filteredData = data.freetoplay.filter((product) => product.id === productId)[0];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.