如何將 Reactjs 中的 SimpleImageSlider 與來自 firebase firestore 的圖像數組一起使用

Question

我的 firebase firestore 文檔中保存了一組圖像。 我想將所有圖像顯示為幻燈片放映，我發現這個 react package 可以做到這一點， react-simple-image-slider 。

我的圖像以這種方式保存在 firestore 中：

現在我以這種方式檢索它們，以便將它們添加到 slider：

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)
  })
})

並以這種方式使用組件：

                     <SimpleImageSlider
                      width={896}
                      height={504}
                      images={imgUrls}
                      showBullets={true}
                      showNavs={true}
                    />

但我收到一條錯誤消息

"TypeError: Cannot read properties of undefined (reading 'url')
    at SimpleImageSlider"

我該如何解決？

編輯：

console.log(JSON.stringify(images))

Answer 1

images 屬性應該是對象數組，其中每個 object 都有一個屬性url ，如使用部分所述。 嘗試重構代碼，如下所示：

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)
})