Question

我正尝试使用使用语义UI的reactJS构建的表单将数据存储到我的Firestore中。提交表单后，在表单中上传的图像文件会存储到Firebase存储中，但其余数据会插入表单中的代码不会添加到firestore集合中。

就像程序在存储图像后冻结一样，因为它不会生成任何 bug 或 error 。。它只是显示了一个无尽的加载指示符，表示它仍在处理 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

@Carl我已经测试了URL，提交表单时，使用Google Chrome浏览器中的DevTools进行了以下测试：

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），请参见following question

此外，在控制台中，有一些建议：

！现在，timestampsInSnapshots设置默认为true，您不再需要显式设置它。在将来的版本中，该设置将被完全删除，因此建议您立即从firestore.settings（）调用中将其删除。

index.cjs.js：40似乎您正在使用Firebase JS SDK的开发版本。将Firebase应用程序部署到生产环境时，建议仅导入要使用的单个SDK组件。对于模块构建，可以按以下方式使用（用组件名称替换-即auth，数据库等）

CommonJS模块：

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>';

尝试将数据存储到Firestore时遇到错误

1 个答案: