如何成功渲染來自 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('')
);