Estoy tratando de obtener algunos datos de niño a padre. Hay una manera que suelo hacer, y funciona totalmente. Pero para una página usé:
<Link to={{ pathname: `/productBuy`, state: { product, iconClick } }}>y cuando envío otro accesorio desde App.js a la página productBuy, se muestra debajo del producto y no está definido.
Códigos de App.js:
const [productInformation, setProductInformation] = useState([]); <Route path="/productBuy" render={props => <ProductBuy {...props} productInformation {productInformation} setProductInformation={setProductInformation} />} />productoComprar.js:
const ProductBuy = (productInfo, {productInformation,setProductInformation}) => { return ( <div className="productBuy"> <div className="productBuyContainer"> <ProductLeft productInfo={productInfo.location.state} /> <ProductRight productInfo={productInfo.location.state} productInformation={productInformation} setProductInformation={setProductInformation}/> </div> </div> ); }Cuando hago console.log, mis accesorios se muestran en el objeto del producto como indefinidos. y cuando invoco una función, aparece un error: ProductRight.js: 51 Uncaught TypeError: setProductInformation no es una función
¿Hay alguna manera de resolver este problema?
En primer lugar, te falta el = después de productInformation en el render prop:
<ProductBuy {...props} productInformation={productInformation} setProductInformation={setProductInformation} /> Y el segundo problema es que estás desempacando los accesorios incorrectamente. Tanto productInformation como setProductInformation están disponibles en el argumento props (el primer argumento posicional) en su función, pero lo está desempaquetando en el segundo argumento en su lugar:
// INCORRECT const ProductBuy = (productInfo, {productInformation,setProductInformation}) => { ... } Puede desempaquetarlo desde el argumento productInfo , que es un objeto que contiene todos los accesorios:
const ProductBuy = (productInfo) => { const { productInformation, setProductInformation } = productInfo; return ( <div className="productBuy"> <div className="productBuyContainer"> <ProductLeft productInfo={productInfo.location.state} /> <ProductRight productInfo={productInfo.location.state} productInformation={productInformation} setProductInformation={setProductInformation}/> </div> </div> ); }También puede optar por descomprimirlo en el nivel superior:
const ProductBuy = ({ location, productInformation, setProductInformation }) => { return ( <div className="productBuy"> <div className="productBuyContainer"> <ProductLeft productInfo={location.state} /> <ProductRight productInfo={location.state} productInformation={productInformation} setProductInformation={setProductInformation}/> </div> </div> ); }Agregue el signo igual al pasar la información del producto a los accesorios, parece que App.js olvidó en productInformation
<Route path="/productBuy" render={props => <ProductBuy {...props} productInformation={productInformation} setProductInformation={setProductInformation} />} />