当我上传图像 firebase 存储 getdownloadUrl() 将下载 url 放入 Firestore Collections 但未在 React JS 中设置

Question

我正在尝试将图像上传到 Firebase 存储，并且在成功上传后我试图同时将图像 downloadURL 插入到 Firestore 集合。

怎么做？ 这是上传图片工作正常但 firestore 不工作的代码。

dbRef = firebase.firestore().collection('stack_overflow').doc()

constructor(props) {
super(props);

this.state = {
    question_id: this.dbRef.id,
    question_title: '',
    question_image: null,
    question_image_url: '',
};
}

dataOnChange = (e) => {
    const state = this.state
    state[e.target.name] = e.target.value
    this.setState(state)
}

handleImageOnChange = e => {
    if (e.target.files[0]) {
        const question_image = e.target.files[0]

        this.setState(() => ({question_image}))
    }
}
 
onSubmitData = (e) => {
    e.preventDefault()

    const {
        question_id, question_title, question_image, question_image_url
    } = this.state;

    /*image upload and download*/
    const uploadImage = storage.ref(`/stack_gallery/${cat_image.name}`).put(cat_image);

    uploadImage.on('state_changed', (snapshot) => {
            console.log("Image Upload Progress")
        },
        (error) => {
            console.log(error);
        },
        /*() => {
            storage.ref('quote_gallery').child(question_image.name).getDownloadURL().then(question_image_url => {
                console.log(question_image_url);
                this.setState({question_image_url});
            })
        }*/);

    storage.ref('stack_gallery').child(question_image.name).getDownloadURL().then(question_image_url => {
        console.log(question_image_url);
        this.setState({question_image_url});
    })
    this.dbRef.set({
        question_id, question_title, question_image_url
    }).then((docRef) => {
        this.add({
            question_id: '',
            question_title: '',
            question_image_url: this.state.cat_image_url
        })
        
    }).catch((error) => {
        console.error("Error Adding Document: ", error)
    })
}

请检查我的代码哪里有问题以及如何解决这个问题。

Answer 1

当我看到你的代码时，你将 question_image_url 保存到 this.state，我认为我们不必将它保存到 state，因为我们使用 state 来呈现 JSX。 一旦你在回调中得到 url 那么你为什么不在回调中运行保存到 firestore？ 而且您使用了 firestore().collection().doc().set，这是错误的。 您应该指明要设置的 doc_id，因为 set 正在更新当前 doc_id 的 function。 如果你想添加新文档，那么你可以使用 add function from collection that wrapps whole docs。

uploadImage.on('state_changed', (snapshot) => {
            console.log("Image Upload Progress")
        },
        (error) => {
            console.log(error);
        },
        function() {
          uploadImage.snapshot.ref.getDownloadURL().then(function(downloadURL) {
          firebase.firestore().collection('stack_overflow').add({
            question_title: question_title,
            question_image: question_image,
            question_image_url: downloadURL
          })
          .then((res) => {
            let id = res.id;   //receive id of doc added
  firebase.firestore().collection('stack_overflow').doc(id).set({question_id:id},{merge:true})
        })
        });