Обнаружена ошибка при попытке сохранить данные в пожарном депо.

Question

Я пытаюсь сохранить данные в моем пожарном хранилище, используя форму, созданную с помощьюactJS, с использованием семантического интерфейса пользователя. После отправки формы загруженный в форму файл изображения сохраняется в хранилище базы данных, но остальные данные вставляются. в форму не добавляется в коллекцию firestore.

Это похоже на то, что программа зависает после сохранения изображения, поскольку не генерирует никаких ошибок или .. просто показывает индикатор бесконечной загрузки, который означает, что он все еще обрабатывает функцию onSubmit

Вы можете проверить форму, чтобы увидеть, как она ведет себя по этой ссылке: https://envy-hxxdini.firebaseapp.com/eventcreate

Вот мой исходный код для функции onSubmit :

   const onSubmit = (e) => {
            e.preventDefault();
      if (eventImage) {
          setLoading(true);
          const uploadImage = storage.ref(`EventImages/${values.eventTitle}`)
          uploadImage.put(eventImage).then(() => {
              storage.ref('EventImages').child(values.eventName).getDownloadURL().then(url => {
                  dbref.add({
                    eventName: values.eventTitle,
                    eventCategory: values.eventCategory,
                    eventType: values.eventType,
                    eventOrganizer: values.eventOrganizer,
                    eventVenue: values.eventVenue,
                    eventStreet1: values.eventStreet1,
                    eventStreet2: values.eventStreet2,
                    eventPhone: values.eventPhone,
                    eventEmail: values.eventEmail,
                    eventDetails: values.eventDetails,
                    startDate: startDate,
                    startTime: startTime,
                    endDate: endDate,
                    endTime: endTime,
                    eventImgUrl: url,
                    public: state.public,
                    tickets: state.ticket
                  }).then((docRef) => {
                    console.log("Document written with ID: ", docRef.id);
                    setValues('');
                    setImage('');
                    setPrevUrl("");
                    setLoading(false);
                  }).catch((error) => {
                      console.error("Error adding document: ", error);
                  });
              })
          })

      }
            else {
        NotificationManager.error('Please an image is required', 'Close', 3000);
            }
    }

Answer 1

@ Карл Я проверил URL, и при отправке формы, используя DevTools в Google Chrome, выполняются следующие действия:

code_: "storage/unauthorized", message_: "Firebase Storage: User does not have permission to access 'EventImages/Test '.", serverResponse_: "{↵ "error": {↵ "code": 403,↵ "message": "Pe…n denied. Could not perform this operation"↵ }↵}", name_: "FirebaseError"}

Об этой ошибке (Firebase 403) см. следующий вопрос

Кроме того, в консоли есть несколько советов:

! Параметр timestampsInSnapshots теперь по умолчанию имеет значение true, и вам больше не нужно явно его устанавливать. В будущем выпуске настройка будет полностью удалена, поэтому рекомендуется удалить ее из вызова firestore.settings ().

index.cjs.js: 40 Itпохоже, что вы используете сборку Firebase JS SDK. При развертывании приложений Firebase в рабочей среде рекомендуется импортировать только отдельные компоненты SDK, которые вы собираетесь использовать. Для сборок модулей они доступны следующим образом (замените на имя компонента - т.е. auth, database и т. Д.)

CommonJS Modules:

const firebase = require('firebase/app'); require('firebase/<PACKAGE>');

Модули ES:

import firebase from 'firebase/app'; import 'firebase/<PACKAGE>';

Машинопись:

import * as firebase from 'firebase/app'; import 'firebase/<PACKAGE>';