Estoy usando React-id-swiper para cargar imágenes de productos. Digamos que tengo 5 productos.
Estoy tratando de usar una función para detectar cuándo cada imagen se carga con éxito, luego, cuando lo están, establezca la 'carga' de useState en falso, que luego mostrará las imágenes.
Estoy usando un 'contador' variable para contar cuántas imágenes hay para cargar. Una vez que 'contador' sea mayor o igual que la cantidad en la lista (5), establezca 'cargando' en FALSO y cargue las imágenes.
Sin embargo, me doy cuenta de que cuando registro en la consola 'contador' cuando lo ejecuto desde useEffect, termina en '0' y se procesa 5 veces. 'Cargando' también sigue siendo cierto.
Sin embargo, si activo una nueva representación, veo 1,2,3,4,5 en la consola. 'Cargando' luego se convierte en falso.
Sospecho que esto se debe a que useEffect es demasiado rápido, pero parece que no puedo resolverlo. ¿Alguien puede ayudar?
Código:
const { products } = useContext(WPContext); const [productsList, setProductsList] = useState(products); const [filteredList, setFilteredList] = useState(products); const [loading, setLoading] = useState(false); useEffect(() => { loadImages(products); }, []); const loadImages = (allProducts) => { let counter = 0; setLoading(true); const newProducts = allProducts.map((product) => { const newImg = new Image(); newImg.src = "https://via.placeholder.com/450x630"; newImg.onload = function () { counter += 1; }; // At this point, if I console log 'counter', it returns as 0. If I trigger a re-render, it returns as 1,2,3,4,5 return { ...product, acf: { ...product.acf, product_image: { ...product.acf.product_image, url: newImg.src, }, }, }; }); handleLoading(newProducts, counter); }; const handleLoading = (newProducts, counter) => { if (counter >= filteredList.length) { setLoading(false); counter = 0; setFilteredList(newProducts); } };Lo primero extraño es que está llamando a la función handleLoading() antes de que esté definida. Esto probablemente no sea un problema, sino una práctica extraña.
También está creando un nuevo contador de variables cuando lo pasa como argumento. En realidad, no está reiniciando el contador que desea.
Además, usar onload es innecesario y puede causar un comportamiento extraño aquí, ya que no es una operación sincrónica sino basada en eventos. Siempre que configure img.src , debería forzarlo a cargar.
Prueba esto:
const loadImages = (allProducts) => { let counter = 0; setLoading(true); const newProducts = allProducts.map((product) => { const newImg = new Image(); newImg.src = "https://via.placeholder.com/450x630"; counter += 1; return { ...product, acf: { ...product.acf, product_image: { ...product.acf.product_image, url: newImg.src }}}; }); const handleLoading = (newProducts) => { if (counter >= filteredList.length) { setLoading(false); counter = 0; setFilteredList(newProducts); } }; handleLoading(newProducts); }; useEffect(() => { loadImages(products); }, []);