Estoy tratando de pasar una matriz desde / (Inicio) mi página /item (itemInfo)
Esta es la aplicación principal () donde enrutamos:
function App() { return ( <Router> <div className="Application"> <Switch> {/*Makes sure we are only on one route at a time*/} <Route exact path='/' component={Home} /> <Route exact path='/item/:pId' component={ItemInfo} /> <Route exact path='/vendor' component={VendorInfo} /> <Route exact path='/addVendor' component={AddVendor}/> <Route exact path='/addProduct' component={AddProduct}/> </Switch> </div> </Router> ); }Y no tengo ni idea de cómo pasar la matriz de {Inicio} a {ItemInfo}, ya que no podemos pasarla como un parámetro de URL (a diferencia de: pId) Esta es la página {ItemInfo}:
import React from 'react' import { useParams } from 'react-router-dom'; //Helps us redirect to other pages function ItemInfo(){ let {pId}= useParams(); //want to have [data] array on this page to access it hopefully like this //console.log(data) and see the array on the console function addNewDataRow(){ console.log("ADD new Data Row"); } return ( <div className="Application"> <header> <nav className="navbar navbar-dark bg-dark"> <div className="container-fluid">Este es el {Inicio} (desde donde quiero pasar la matriz de datos):
function Home(){ const product_data=[ {pId: 1, pName:'product name', pDescription:' description here', pQuantity:1, pWeightType:'Kg'}, ] const [data,setData]=useState(product_data); const [vData, setvData]=useState(vendor_data); const history=useHistory(); function itemTableRowClicked(e){ console.log(e.target.id); console.log("YOU CLICKED ME"); let path=`/item/:${e.target.id}`; //let path=`/item`; history.push(path); }La función itemTableRowClicked(e) es la que redirige a la página ItemInfo.
Soy un estudiante de programación bastante nuevo, así que avíseme si mi descripción no es clara o me falta información esencial :)
React posee un flujo de datos unidireccional, es decir, de padre a hijo. un enfoque es definir el estado en un componente que es padre tanto de Home como de ItemInfo, es decir, App, pero ese no es un buen enfoque. El segundo es usar Context Api u otras herramientas de administración de estado como redux, flux, etc. reactjs.org/docs/context.html (para context api)
function App() { const product_data=[ {pId: 1, pName:'product name', pDescription:' description here', pQuantity:1, pWeightType:'Kg'}, ] const [data,setData]=useState(product_data); return ( <Router> <div className="Application"> <Switch> {/*Makes sure we are only on one route at a time*/} <Route exact path='/' > <Home data={data} setData={setData} /> </Route> <Route exact path='/item/:pId'> <ItemInfo data={data} /> </Route> <Route exact path='/vendor' component={VendorInfo} /> <Route exact path='/addVendor' component={AddVendor}/> <Route exact path='/addProduct' component={AddProduct}/> </Switch> </div> </Router> ); } //Home component function Home({data,setData})...... //ItemInfo component function ItemInfo({data}){Ya estás usando useHistory de react-router. Esto le permitiría impulsar un state junto con el cambio de ruta. El estado es donde puede pasar la matriz.
// Push a new entry onto the history stack with a query string // and some state. Location state does not appear in the URL. history.push('/home?the=query', { someArray: [...stuff] }); Luego puede quitar la referencia a ese estado en el segundo componente de props.location.state.someArray .
Por supuesto, deberá cambiar su componente ItemInfo para aceptar accesorios.