Блог

Я следовал учебнику, в котором описывается, как создать галерею с помощью Firebase и React.js, шаг за шагом. Мне удалось разместить изображения в массиве storage и console.log() моей коллекции из firestore. Но, к сожалению, я не смог отобразить изображения на странице галереи.

 // .... The tutorial's way....
function useFirestore (collection) {
    const [docs, setDocs] = useState([]);

    useEffect(() => {
      const unsub = projectFirestore.collection(collection)
        .orderBy('createdAt', 'desc')
        .onSnapshot(snap => {
          let documents = [];

          snap.forEach(doc => {
            documents.push({...doc.data(), id: doc.id});
          });

          setDocs(documents);
        });

      return () => unsub();
    }, [collection]);  
    return { docs };
  } 
  export default useFirestore;
 

Кроме того, я создал систему аутентификации с Firebase и использую useContext(). Я думаю, что тот факт, что я использовал контекст, является основным отличием между кодом tuto и моим, а также тем фактом, что блокировка галереи для отображения изображений.

 // ...index.js
ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById('root')
  );
  
 

Я попытался изменить свой код, чтобы он соответствовал контексту, но он отправляет мне сообщение «Не удается уничтожить свойство {docs} …».

 //...Test with context.... not sure if it's good
 
const galleryContext = React.createContext()

export function useFireStore() {
    useContext(galleryContext)
}

export function GalleryProvider({collection}){

    const [docs, setDocs] = useState([]);

     useEffect(() => {
       const unsub = projectFirestore.collection(collection)
             .orderBy('createdAt', 'desc')
             .onSnapshot(snap => {
                 let documents = [];

                 snap.forEach(doc => {
                     documents.push({...doc.data(), id: doc.id});
                 });
                 setDocs(documents);
             });
             return () => unsub();
     }, [collection]);

     return (
        <galleryContext.Povider value={docs}>
            {collection}
        </galleryContext.Povider>
    )
}
 

my gallery component

 function Gallery() {

    const { docs } = useFireStore('images');

    return (
        <div>
            <div className="img_grid">
                { docs amp;amp; docs.map(doc =>{
                    <div className="imgWrap" key={doc.id}>
                        <img src={doc.url} alt="gallery" />
                    </div>
                })}
            </div>
        </div>
    )
}

export default Gallery
 

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