React Router 将数据从一个组件传递到另一个组件

Question

所以我在将数据从一个组件传递到另一个组件时遇到了问题。所以我有免费播放组件，它从 json 获取 freetoplay 数组并显示它。我还有一个链接，它应该打开一个支付路径并传递数据，在支付中我有一个过滤器功能，它根据对象的 id 过滤对象，无论如何，当我按下链接时，它应该显示图像类和价格，但它没有，我不知道为什么。如果有人可以帮助我，我将不胜感激。干杯

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> 

Answer 1

看起来您的问题可能出在 Payment 组件中处理您的 data.filter 上。

你使用：

const filteredData = data.filter((product) => product.id === productId)[0];

但是您从data.json 导入的数据是一个对象，而不是一个数组。

你的意思一定是：

const filteredData = data.action.filter((product) => product.id === productId)[0];

或者：

const filteredData = data.freetoplay.filter((product) => product.id === productId)[0];