Estoy agregando artículos a la lista de deseos y, una vez que se agregan, intento volver a representar el ícono del corazón para que tenga un número que indique que el artículo se agregó a la lista de deseos. Lo que quiero lograr es similar al botón Me gusta de Twitter, cuando a alguien le gusta la publicación, la cantidad de Me gusta aumenta de inmediato. Entonces, en mi caso, cuando a alguien le gusta (lista de deseos) el producto, aumentará el número en la parte superior del ícono del Corazón. Estoy usando el almacenamiento local para obtener los elementos que se agregan a la lista de deseos, y puedo volver a procesar el componente Lista de deseos cuando se agrega un nuevo elemento dentro del efecto, pero hace que el componente se vuelva a procesar infinitamente, lo que me da una advertencia. de Warning: Maximum update depth exceeded
Aquí está mi efecto;
const [wishlist, setWishlist] = React.useState([]); React.useEffect(() => { if (typeof window !== "undefined") { const wishlistStorage = localStorage.getItem("wishlist") === null ? [] : [...JSON.parse(localStorage.getItem("wishlist"))]; if (wishlistStorage.length > 0) { setWishlist(wishlistStorage); } } }, [wishlist]);Si elimino la lista de deseos de la matriz de dependencia, necesito actualizar la página para ver la cantidad correcta de elementos. ¿Qué estoy haciendo mal aquí y cuál sería la mejor manera de abordar esto? ¡Gracias!
simplemente elimine la lista de deseos de las dependencias
React.useEffect(() => { if (typeof window !== "undefined") { const wishlistStorage = localStorage.getItem("wishlist") === null ? [] : [...JSON.parse(localStorage.getItem("wishlist"))]; if (wishlistStorage.length > 0) { setWishlist(wishlistStorage); } } }, []);Aquí ha agregado la lista de deseos en la matriz de dependencias de useEffect y ha agregado la condición if (wishlistStorage.length > 0) { setWishlist(wishlistStorage); } , porque al configurar nuevamente la lista de deseos, se volverá a procesar y nuevamente se activará useEffect.
Si entiendo correctamente, y solo necesita esto para el renderizado inicial, simplemente puede eliminar la lista de wishlist de la matriz de dependencia.
const [wishlist, setWishlist] = React.useState([]); React.useEffect(() => { if (typeof window !== "undefined") { const wishlistStorage = localStorage.getItem("wishlist") === null ? [] : [...JSON.parse(localStorage.getItem("wishlist"))]; if (wishlistStorage.length > 0) { setWishlist(wishlistStorage); } } }, []);