Блог

У меня есть несколько папок в хранилище firebase, которые содержат изображения (каждая папка соответствует сущности).https://i.stack.imgur.com/s9ZpX.png

Когда я хочу загрузить URL-адрес каждой сущности, firebase приносит мне все изображения, которые у нее есть в хранилище, даже если она выполняет привязку к каждой сущности.

 useEffect(() => {
setLoading(true);
Promise.all([getRooms(), getLocation()])
  .then((values) => {
    const roomsSnapshot = values[0];
    const rooms = [];
    const pUrl = [];
    roomsSnapshot.forEach((doc) => {
      const splitAddress = doc.data().address.split(", ");
      formatedAddress.current = splitAddress[1]   " "   splitAddress[0];

    //Download from storage//

      storage
        .ref(`${doc.data().roomPhotoId}/`)
        .list()
        .then(function (result) {
          result.items.forEach((imageRef) => {
            imageRef.getDownloadURL().then((url) => {
              console.log(url)
              roomItems.push(url)

            });
          });
          setRoomsImagesCounter(roomsImagesCounter   1);
          // no photos scenario
          if (result.items.length === 0) {
            setLoading(false);
          }
        });

      //pushing entity data//

      rooms.push({
        ...doc.data(),
        id: doc.id,
        photosURL: roomItems,
        shortAddress: formatedAddress.current,
        coordsAddress: coords.current,
      });
    });
    console.log(rooms);
    setRooms(rooms);
    // getPhotos(rooms);

    setLoading(false);
  })
  .catch((err) => {
    console.log("Error getting getting rooms or user role", err);
  });
// eslint-disable-next-line react-hooks/exhaustive-deps }, []);
 

Я не знаю, почему firebase приносит мне все изображения вместо того, чтобы приносить мне изображения отдельно для каждого объекта.

Я надеюсь, что вы поняли, и я жду ваших ответов или любых вопросов, которые у вас есть.

Спасибо!

Обновить

Это консоль.журнал(номера) https://i.stack.imgur.com/rQkoB.png

Можете ли вы попробовать создать хранилище ref таким образом:

 // Create a reference under which you want to list
var listRef = storage.ref().child(`${doc.data().roomPhotoId}/`);

// Find all the prefixes and items.
listRef.listAll()
  .then((res) => {
    res.prefixes.forEach((folderRef) => {
      // All the prefixes under listRef.
      // You may call listAll() recursively on them.
    });
    res.items.forEach((itemRef) => {
      // All the items under listRef.
    });
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });
 

Обязательно используйте listAll .

Имейте в виду, что:

• root.child(‘изображения’).listAll() вернет /изображения/uid в качестве префикса.
• root.child(‘изображения/uid’).listAll() вернет файл в виде элемента.

Вы можете узнать больше об этом здесь.

Ваш код с группировкой загрузок:

 useEffect(() => {
setLoading(true);
Promise.all([getRooms(), getLocation()])
  .then((values) => {
    const roomsSnapshot = values[0];
    const rooms = [];
    const pUrl = [];
    roomsSnapshot.forEach((doc) => {
      const splitAddress = doc.data().address.split(", ");
      formatedAddress.current = splitAddress[1]   " "   splitAddress[0];

    //Download from storage//

      rooms[`${doc.data().roomPhotoId}`]=[]

      storage
        .ref(`${doc.data().roomPhotoId}/`)
        .list()
        .then(function (result) {
          result.items.forEach((imageRef) => {
            imageRef.getDownloadURL().then((url) => {
              console.log(url)
              roomItems.push(url)

            });
          });
          setRoomsImagesCounter(roomsImagesCounter   1);
          // no photos scenario
          if (result.items.length === 0) {
            setLoading(false);
          }
        });

      //pushing entity data//

      rooms[`${doc.data().roomPhotoId}`].push({
        ...doc.data(),
        id: doc.id,
        photosURL: roomItems,
        shortAddress: formatedAddress.current,
        coordsAddress: coords.current,
      });
    });
    console.log(rooms);
    setRooms(rooms);
    // getPhotos(rooms);

    setLoading(false);
  })
  .catch((err) => {
    console.log("Error getting getting rooms or user role", err);
  });
// eslint-disable-next-line react-hooks/exhaustive-deps }, []);