Estoy tratando de crear un carrito de compras que muestre una cantidad de artículos guardados. Para este propósito, creé una barra de navegación que muestra un carrito de compras y un número. Estoy dando la cantidad de apoyo a la barra de navegación. El monto de prop es el número que quiero mostrar al lado del carrito. Cuando actualizo la cantidad, el número debería cambiar, pero no lo hace.
Traté de actualizarlo usando useEffect así:
const Navbar = ({amount}) => {
const [safedItems, setSafedItems] = useState(0);
useEffect( () => {
setSafedItems(amount)
console.log(amount)
}, [amount])
return (
<>
<nav className={styles["nav-bar"]}>
<a href="/" >
<h2>Upcoming events</h2>
</a>
<SearchBar placeholder='Search for an event' />
<a href="/calendar">
<div className={styles["nav-bag"]}>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" className="bi bi-cart3" viewBox="0 0 16 16" >
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<span className={styles['bag-quantity']}>
<span>
{safedItems}
</span>
</span>
</div>
</a>
</nav>
</>
)
}
Pero no está funcionando. ¿Qué necesito cambiar para que la barra de navegación se actualice?
EDITAR
así es como establezco mi cantidad
const [safedIds, setSafedIds] = useState(null)
function addSafedId (id) {
if(safedIds !== null){
if(!safedIds.includes(id)){
let temp = safedIds;
temp.push(id);
setSafedIds(temp)
}
} else setSafedIds([id]);
console.warn(safedIds)
}
y la declaración de devolución
<Navbar amount={safedIds&&safedIds.length} />
¿La variable de cantidad usa useState en su otro componente donde se usa NavBar ?
Si no, úsalo. Es probable que su monto haya cambiado, pero la página nunca se vuelve a mostrar. El uso de useEffect y useState es inútil en su componente NavBar , solo necesita pasar la cantidad directamente al intervalo como sugirió Adel Benyahia :
<span className={styles['bag-quantity']}>
<span>
{amount}
</span>
</span>
En su componente principal, cambie esta línea de código
<Navbar amount={safedIds&&safedIds.length} />
A
<Navbar amount={safedIds} />
Luego, en su componente Navbar
const {amount} = props
return (<span>{amount&&amount.Length}<span>)
en este bloque de código
const [safedItems, setSafedItems] = useState(0);
useEffect( () => {
setSafedItems(amount)
console.log(amount)
}, [amount])
está pasando "cantidad" como segundo argumento para useEffect, pero "cantidad" no cambia en su código, entonces useEffect no volverá a procesar el componente.
intente eliminar el bloque de código useEffect y este código " const [safedItems, setSafedItems] = useState(0);"
Luego asigne el valor de "cantidad" directamente a la etiqueta de esta manera
<span className={styles['bag-quantity']}>
<span>
{amount}
</span>
</span>