firebase-storage - 将获取的数据存储到状态组件中

Question

提交函数有另一个名为 handleImageAdd() 的函数，它将从表单收集的图像推送到 Firebase 存储。

const handleSubmit = async (e) => {
        setSubmitLoading(true)
        e.preventDefault()

        console.log("submitting form...") 

        await handleImageAdd()

        console.log("form submitted!")
        setSubmitLoading(false)
    }

这是 handleImageAdd() 函数，当图像被推送到存储时，我正在获取它的下载 url 并将其存储到反应状态。但是 url 不会在第一次调用时存储到状态中，它会在第二次调用时开始存储 url。为什么会这样？

const handleImageAdd = async(e) => {     
        console.log("adding image...") 
        const storageRef = storage.ref('images')
        const fileRef = storageRef.child(image.name)
        await fileRef.put(image)
        const url = await fileRef.getDownloadURL()
        console.log(url)
        setImageUrl(url)
        console.log("imageurl - ",imageUrl)
        console.log("image added!")
    }

标签： firebase-storage