如何成功地呈现来自美国宇航局火星漫游者api的一系列图像

Question

我正在做一个项目，它消耗了美国宇航局火星漫游者api的数据，并将其保存在Immutable.js商店的一个商店里。数据在存储中被正确更新，我能够访问数据并将其打印到控制台，但是我无法获得要显示的图像。

我的职责：

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>`;

imageGallery和ImageGallerySlice变量都将我想要的数据打印到控制台，但是我似乎无法用那里的逻辑来呈现图像。

打印到我的控制台上的数据

我能够用上面注释掉的变量将图像记录到控制台，这个变量是通过数组索引来选择的-

// const img_src = imageGallerySlice8.img_src；// console.log(img_src)；

最初抛出一个错误，但在更低的页面上，我能够看到图像

错误 漫游者图像

否则，在没有该行的情况下，控制台中不会出现错误，但是第二个条件语句在页面上呈现-“图像加载”。

非常感谢，埃文

Answer 1

对imageGallerySlice.map的调用将一个集合转换为一个新集合。但是，结果从未被使用过！

也许你想甚至写些类似的东西

return imageGallerySlice.map(
    image => roverImageGallery(image.get('img_src')).join('')
);

然后，这段代码将介绍下一个问题: Immutable.js集合的.map不返回数组，而是返回新的Immutable.js集合。

因此，您将得到一组react组件，这些React组件无法理解这些组件。

解决方案是显式转换为数组，例如使用toArray()

return imageGallerySlice.toArray().map(
    image => roverImageGallery(image.get('img_src')).join('')
);