Al hacer clic en el botón, agrego información del producto al almacenamiento local y la configuro en contexto.

Estoy usando contexto en dos lugares: encabezado y página de productos, la sintaxis es casi la misma. Hay un encabezado de console.log y cada vez que estoy interactuando con el contexto, se dispara instantáneamente, lo que confirma que el contexto funciona bien. Sin embargo, cuando entro en la página de productos, necesito volver a cargarla una vez más para obtener los datos. ¿Porqué es eso?

archivo de contexto

 import React, { useState, useEffect } from "react"; export const LikedContext = React.createContext([{}, () => {}]); export const LikedProvider = (props) => { const [liked, setLiked] = useState(null); useEffect(() => { if (typeof window !== "undefined") { let likedData = localStorage.getItem("liked"); likedData = likedData ? JSON.parse(likedData) : ""; setLiked(likedData); } }, []); return ( <LikedContext.Provider value={[liked, setLiked]}> {props.children} </LikedContext.Provider> ); };

Encabezamiento

 export const LikedProductsIcon = () => { const [liked, setLiked] = useContext(LikedContext); console.log("liked header", liked); const likedCount = null !== liked && Object.keys(liked).length ? liked.totalProductsCount : ""; const totalPrice = null !== liked && Object.keys(liked).length ? liked.totalProductsPrice : ""; return ( <> <CartContainer to="/pamegti-produktai"> <CountCircle> <HeartSvg /> {likedCount ? <span>{likedCount}</span> : ""} </CountCircle> </CartContainer> </> ); };

Página de productos que gustan

 const LikedProducts = () => { const [liked, setLiked] = useContext(LikedContext); console.log("liked page", liked); return ( <Layout> <Container> {liked ? ( liked.products.map((product, index) => ( <ProductsCard product={product} blackText /> )) ) : ( <div>Pamėgtų produktų nėra.</div> )} </Container> </Layout> ); };