Estoy en el proceso de crear un sitio web de comercio electrónico de merchandising para un cliente que utiliza la API de commerce.js, pero me encontré con un problema. Al pasar el objeto "carrito" como accesorio al archivo de pago, regresa como un objeto vacío que rompe el sitio web. La aplicación web pasa el objeto "carrito" como accesorio en otras partes del código y funciona bien. ¿Hay algo que estoy haciendo mal?

Código de referencia:

 import React, { useState, useEffect } from 'react'; import {Paper, Stepper, Step, StepLabel, Typography, CircularProgress, Divider, Button} from '@material-ui/core'; import { commerce } from '../../../lib/commerce'; import Addressform from '../Addressform'; import Paymentform from '../Paymentform'; const steps =['Shipping Address', 'Payment details']; const Checkout = ({ cart }) => { const [activeStep, setActiveStep] = useState(0); const [checkoutToken, setCheckoutToken] = useState(null); useEffect (() => { const generateToken = async () => { console.log(cart.id); // returns as undefined try { const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' }); console.log(token); setCheckoutToken(token); console.log("Success!") } catch (error) { console.log(error); //Returns 404 Error Obv console.log("Didnt work") } } generateToken(); }, []); const Confirmation = () => ( <> Confirmation </> ); const Form = () => activeStep === 0 ? <Addressform /> : < Paymentform /> return( <> ... </> ); }; export default Checkout;