如何成功渲染来自 Nasa Mars Rover api 的一系列图像

Question

我正在开发一个项目，该项目使用来自 Nasa Mars Rover 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 = imageGallerySlice[8].img_src; // console.log(img_src);

最初抛出错误，但随后在页面下方我能够看到图像

错误漫游者图像

否则，如果没有该行，控制台中不会出现错误，但第二个条件语句会呈现在页面上——“图像加载”

非常感谢，埃文

Answer 1

调用imageGallerySlice.map将一个集合转换为一个新集合。 然而，结果从来没有用过！

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

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

然后，此代码将您带到下一个问题：An Immutable.js collection's .map does not return an array but a new Immutable.js collection 。

所以你最终得到了 React 不理解的 React 组件的集合。

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

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