He usado react-simple-image-slider para construir un control deslizante de imagen para mi proyecto. Obtengo imágenes de Firestore y las paso en las propiedades del control deslizante. Sin embargo, no aparecen la primera vez, sino solo si vuelvo a renderizar (no actualizo). Cuando probé con imágenes codificadas, funcionó. Además, ¿alguien sabe cómo hacer que la imagen de fondo encaje en el control deslizante? Gracias
Aquí está el código:
export const ProductPage = () => { const {uniqueProductName} = useParams(); const [productImages, setProductImages] = React.useState([]); const fetchProduct=async()=>{ const q = query(collection(db, "products"), where("uniqueName", "==", uniqueProductName)); const querySnapshot=await getDocs(q); let data = null; querySnapshot.forEach((doc)=>{ doc.data().img.forEach((image)=>{ productImages.push({'url': image}) }) }) setProductImages(productImages); console.log(productImages); } React.useEffect(() => { console.log(uniqueProductName); fetchProduct(); }); return ( <div> <Navbarr/> <MainContainer> <SliderContainer> <SimpleImageSlider width={896} height={504} images={productImages} showBullets={true} showNavs={true} /> </SliderContainer> <InfoContainer> </InfoContainer> </MainContainer> <Footer/> </div> ) }Para hacer que el fondo de la imagen se ajuste al control deslizante, la documentación dice esto, pero no entiendo dónde agregarlo en mi aplicación React: ingrese la descripción de la imagen aquí
Necesitas dos arreglos principales:
const {uniqueProductName} = useParams(); const [productImages, setProductImages] = React.useState([]); const fetchProduct = async () => { const q = query(collection(db, "products"), where("uniqueName", "==", uniqueProductName)); const querySnapshot=await getDocs(q); let data = null; // You need to use a new array to trigger a re-render since arrays are objects // with a reference memory address, and when React compares them it makes a shallow // compare, it just checks if they are the same object ( same reference ), // not they have the same properties or elements. const imgs = [] querySnapshot.forEach((doc)=>{ doc.data().img.forEach((image)=>{ imgs.push({'url': image}) }) }) setProductImages(imgs); } React.useEffect(() => { console.log(uniqueProductName); fetchProduct(); },[]); // Add an empty array of deps, to make the fetch only on component mount, // otherwise it will get stuck in a loop at each re-render.