通过 React Router 从 json 传递数据

Posted 2023-02-22

【中文标题】通过 React Router 从 json 传递数据

【英文标题】：Passing data from json via React Router

【发布时间】：2021-04-20 21:50:16

【问题描述】：

你好 *** 社区。所以我在将数据从一个组件传递到另一个组件时遇到问题。所以我有 Free To Play 组件，它从 json 获取 freetoplay 数据并将其呈现在显示器上。我还有一个链接，它应该打开一个支付路径并传递数据。在付款中，我有一个过滤器功能，它是基于 id 的过滤器。无论如何，当我按下链接时，它应该呈现图像类别和价格，但它没有，我不知道为什么。不要被上下文混淆，它只是搜索功能。我已经多次发布这个问题，但似乎没有人给我答案，为什么会这样。我可以使用 Redux 来实现这个功能吗？如果有人可以帮助我，我将不胜感激。干杯

import React from 'react'
import  useLocation  from "react-router-dom";
import data from "../data.json";

function Payment()   
 const  state:  product   = useLocation();
    return (
        <div  className='Payment'>
         <img src=product.image></img>
         <h1>product.price</h1>
         <h1>product.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  className='link'  to=
    pathname: `/payment/$product.id`,
    state: 
      product, 
    ,
  >
        </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"
      
    ],
    
  
]

import React,  useState, useContext  from 'react';

export const SearchContext =React.createContext(null)
export  default function SearchProvider(children) 

const [searchValue, setSearchValue] = React.useState("");


function filterProduct(product) 
     return product.name.toLowerCase().includes(searchValue.toLowerCase());
     
      return( 

       <SearchContext.Provider value =filterProduct,   searchValue, 
        setSearchValue>
             children 
        </SearchContext.Provider>             
             ); 


function Routes() 
    return (
       
        <div>     
          <Router>                 
            <SideBar /> 
          <Switch>   
           <Route  path="/payment/:productId">
             <Payment/>
           </Route>             
           <Route path="/freetoplay">  
            <FreeToPlay  />
           </Route>  
            <Route path="/action">  
              <Action  />
            </Route>           
            </Switch>  
          </Router>
       </div>
    )


export default Routes

【参考方案1】：

您可以尝试使用路由状态来发送带有路由转换的product 对象。

<Link
  to=
    pathname: `/payment/$product.id`,
    state: 
      product, // <-- the mapped product from data
    ,
  
  className='link'
>
  Buy Now
</Link>

在接收路由上正在渲染的组件上，您可以从位置对象访问状态。

通过props（this.props 或props，如果是功能组件）。可以由Route 直接渲染或用withRouter 高阶组件包装。

const  state:  product   = props.location;

通过useLocation反应钩子。

const  state:  product   = useLocation();

【讨论】：

我忘记在问题中添加路线

或者由于某种原因它没有显示图片，就像我在没有渲染图像时可以看到那个小 img(error) -

@Tequila 这是你的真实数据吗？ "src=fsdf" 似乎不是有效的图像源。

当然不，它在 FreeToPlay 组件中显示

会不会是因为路线问题