• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

253
Views
¿Cómo podemos inyectar accesorios de página en Next.JS?

Me gustaría, por ejemplo, usar la API React Context para pasar accesorios a páginas desde el archivo _app.

Otro caso de uso sería refactorizar un enrutamiento de ReactJS, donde el estado se pasa de app.js a las páginas a través de la definición de ruta de la siguiente manera:

<Route><Component state=state/></Route>

Encontré esta documentación pero parece que no deberíamos tocar los pageProps ya que solo para accesorios generados estáticamente.

Aquí hay una pieza concreta de código que estoy tratando de arreglar:

 const App = (Component,pageProps) => { const [mobileOpen, setMobileOpen] = React.useState(false); const [products, setProducts] = useState([]); const [cart, setCart] = useState({}); const [order, setOrder] = useState({}); const [errorMessage, setErrorMessage] = useState(''); const fetchProducts = async () => { const { data } = await commerce.products.list(); setProducts(data); }; const fetchCart = async () => { setCart(await commerce.cart.retrieve()); }; const handleAddToCart = async (productId, quantity) => { const item = await commerce.cart.add(productId, quantity); setCart(item.cart); }; const handleUpdateCartQty = async (lineItemId, quantity) => { const response = await commerce.cart.update(lineItemId, { quantity }); setCart(response.cart); }; const handleRemoveFromCart = async (lineItemId) => { const response = await commerce.cart.remove(lineItemId); setCart(response.cart); }; const handleEmptyCart = async () => { const response = await commerce.cart.empty(); setCart(response.cart); }; const refreshCart = async () => { const newCart = await commerce.cart.refresh(); setCart(newCart); }; const handleCaptureCheckout = async (checkoutTokenId, newOrder) => { try { const incomingOrder = await commerce.checkout.capture(checkoutTokenId, newOrder); setOrder(incomingOrder); refreshCart(); } catch (error) { setErrorMessage(error.data.error.message); } }; useEffect(() => { fetchProducts(); fetchCart(); }, []); const handleDrawerToggle = () => setMobileOpen(!mobileOpen); /* switch (useRouter.pathname) { case ('/shop'):return <Products products={products} onAddToCart={handleAddToCart} handleUpdateCartQty /> case ('/cart'): return<Cart cart={cart} onUpdateCartQty={handleUpdateCartQty} onRemoveFromCart={handleRemoveFromCart} onEmptyCart={handleEmptyCart} /> case ('/checkout'): return <Checkout cart={cart} order={order} onCaptureCheckout={handleCaptureCheckout} error={errorMessage} /> } */ return <Component className="App" {...pageProps} /> } export default App
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

El uso de una declaración de cambio en lugar del sistema de enrutamiento hará lo siguiente:

En tu ejemplo:

 import {useRouter} from 'next/router' [...] switch (router.pathname) { case "/shop": return ( <div style={{ display: "flex" }}> <CssBaseline /> <Navbar totalItems={cart.total_items} handleDrawerToggle={handleDrawerToggle} /> <Products products={products} onAddToCart={handleAddToCart} handleUpdateCartQty /> </div> ); case "/cart": return ( <div style={{ display: "flex" }}> <CssBaseline /> <Navbar totalItems={cart.total_items} handleDrawerToggle={handleDrawerToggle} /> <Cart cart={cart} onUpdateCartQty={handleUpdateCartQty} onRemoveFromCart={handleRemoveFromCart} onEmptyCart={handleEmptyCart} /> </div> ); case "/checkout": return ( <div style={{ display: "flex" }}> <CssBaseline /> <Navbar totalItems={cart.total_items} handleDrawerToggle={handleDrawerToggle} /> <Checkout cart={cart} order={order} onCaptureCheckout={handleCaptureCheckout} error={errorMessage} /> </div> ); }
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error