FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined

Question

所以在这里我想将图像 URL 从 firebase 存储存储在 firestore 中。我收到未定义的错误，因为我的 setImgUrl 未定义。请帮我解决这个问题。

import React, { useState } from "react";
import "../mainTab.css";
import "./addScreen.css";

import firebase, { storage } from "../firebase";


const AddScreen = () => {
  const db = firebase.firestore();
  const [cat, setCat] = useState();
  const [course, setCourse] = useState();
  const [name, setName] = useState();
  const [price, setPrice] = useState();
  const [descrip, setDescrip] = useState();
  const [image, setImage] = useState();
  const [imgURL, setImgURL] = useState();

  const onSubmitHandler = (event) => {
    event.preventDefault();

    const ref = storage.ref(`/images/${image.name}`);
    const uploadTask = ref.put(image);
    uploadTask.on("state_changed", console.log, console.error, () => {
      ref.getDownloadURL().then((url) => {
        setImage(null);
        setImgURL(url);
        console.log(imgURL);
      });
    });

    const data = {
      name: name,
      price: price,
      cat: cat,
      course: course,
      decription: descrip,
      image: imgURL,
    };

    db.collection("menu")
      .doc(course.toString())
      .collection(name.toString())
      .add(data)
      .then(() => alert("menu item is posted"))
      .catch((error) => alert("error: " + error));

    setName("");
    setPrice("");
    setCat("");
    setCourse("");
    setImage("");
    setDescrip("");
  };

我需要 setImg 挂钩中的 img URL。那么在完成上传后有什么方法我应该调用数据库写入函数（我尝试使用标志（false）挂钩但没有帮助？通过图像完美上传到 firebase 存储

Answer 1

尝试将此部分放入一个函数中，然后在 'then' 中调用该函数比如说

    const putUrl = ()=>{
    db.collection("menu")
      .doc(course.toString())
      .collection(name.toString())
      .add(data)
      .then(() => alert("menu item is posted"))
      .catch((error) => alert("error: " + error));

    setName("");
    setPrice("");
    setCat("");
    setCourse("");
    setImage("");
    setDescrip("");
  }

现在调用'then()'中的putUrl，这部分代码只有在'imgUrl'被抓取后才会执行。你得到一个错误，因为获取 'imgUrl' 和添加数据都是异步的，并且会在 'imgUrl' 被获取

之前执行

Answer 2

任何需要从 Firebase 下载 URL 的代码都需要在 then 回调中，从那里调用，或者同步到运行一次 imgURL以其他方式设置。

修复代码的最简单方法是将写入 Firestore 的代码移动到 then 块中，如下所示：

const ref = storage.ref(`/images/${image.name}`);
const uploadTask = ref.put(image);
uploadTask.on("state_changed", console.log, console.error, () => {
  ref.getDownloadURL().then((url) => {
    setImage(null);
    setImgURL(url);
    console.log(imgURL);

    const data = {
      name: name,
      price: price,
      cat: cat,
      course: course,
      decription: descrip,
      image: url, //  Use url here, as imgURL won't be set yet
    };

    db.collection("menu")
      .doc(course.toString())
      .collection(name.toString())
      .add(data)
      .then(() => alert("menu item is posted"))
      .catch((error) => alert("error: " + error));
  });
});

FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined

FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined

javascript

reactjs

firebase-storage

google-cloud-firestore