0
197
ViewsCómo usar SimpleImageSlider en Reactjs con una matriz de imágenes de firebase firestore
Tengo una serie de imágenes guardadas en mis documentos de firebase firestore. Quiero mostrar todas las imágenes como una presentación de diapositivas y encontré este paquete de reacción que hace eso, react-simple-image-slider .
Mis imágenes se guardan de esta manera en firestore:
Ahora los estoy recuperando de esta manera para agregarlos al control deslizante:
const [imgUrls, setIMGUrls] = useState([]); const imageList = [] firebase.firestore().collection("Properties").where("propertyID", "==", propID).get().then((snapshot) => { snapshot.forEach((doc) => { const { imageUrls, features } = doc.data(); imageList.push({ imageUrls: imageUrls, }) setIMGUrls(imageList) }) })y usando el componente de esta manera:
<SimpleImageSlider width={896} height={504} images={imgUrls} showBullets={true} showNavs={true} />pero me sale un error que dice
"TypeError: Cannot read properties of undefined (reading 'url') at SimpleImageSlider"¿Cómo puedo arreglar eso?
EDITAR:
console.log(JSON.stringify(images))
·
Juan Pablo Isaza
1 answers
Answer question0
La propiedad de imágenes debe ser una matriz de objetos donde cada objeto tiene una url de propiedad como se menciona en la sección de uso . Intente refactorizar el código como se muestra a continuación:
const [imgUrls, setIMGUrls] = useState([]); firebase.firestore().collection("Properties").where("propertyID", "==", propID).get().then((snapshot) => { // images from all documents in the snapshot let images = [] snapshot.forEach((doc) => { const { imageUrls } = doc.data(); images = [...images, ...imageUrls.map(url => ({ url }))] }) setIMGUrls(images) })
·
Juan Pablo Isaza
Report
Answer question