Estoy trabajando en un proyecto que consume datos de la API de Nasa Mars Rover y los guarda en una tienda con la tienda Immutable.js. Los datos se actualizan correctamente en la tienda y puedo acceder a los datos e imprimirlos en la consola, pero no puedo mostrar las imágenes.
Mis funciones:
const renderRoverImages = () => { const imageGallery = store.get('roverImages'); console.log(imageGallery); const imageGallerySlice = imageGallery.slice(0, 10); console.log(imageGallerySlice); // const img_src = imageGallerySlice[8].img_src; // console.log(img_src); if (imageGallerySlice.hasOwnProperty('img_src')) { imageGallerySlice.map( image => roverImageGallery(image.get('img_src')).join('') ); } return `<p class='loading-images'>Loading Images</p>`; }; const roverImageGallery = (src) => ` <div class='scroll-item'> <img src='${src}' alt='One of the rover latest images'></div>`;Tanto las variables imageGallery como ImageGallerySlice imprimen los datos que quiero en la consola, pero parece que no puedo representar las imágenes con la lógica desde allí.
Los datos impresos en mi consola.
Puedo registrar imágenes en la consola con esta variable que comenté anteriormente que se selecciona por el índice de matriz:
// const img_src = imageGallerySlice[8].img_src; // consola.log(img_src);
Inicialmente arroja un error, pero luego, más abajo en la página, puedo ver la imagen
De lo contrario, sin esa línea, no aparecen errores en la consola, pero la segunda declaración condicional se muestra en la página: "imágenes cargando"
Muchas gracias Evan
La llamada a imageGallerySlice.map convierte una colección en una nueva colección. Sin embargo, ¡el resultado nunca se usa!
Tal vez querías o incluso escribiste algo similar a
return imageGallerySlice.map( image => roverImageGallery(image.get('img_src')).join('') ); Este código lo lleva al siguiente problema: el .map de una colección .map no devuelve una matriz sino una nueva colección Immutable.js.
Entonces terminas con una colección de componentes de reacción, que React no entiende.
La solución es convertir explícitamente a una matriz, por ejemplo, con toArray()
return imageGallerySlice.toArray().map( image => roverImageGallery(image.get('img_src')).join('') );