我在上传图片时尝试使用从 Firestore 收到的 URL 时遇到问题

Question

我的逻辑过程如下：

• 我将 img 上传到 firestore.

• 当我收到承诺时，我要那个img的URL。

• 一旦有了它，我就使用 React State 和 IMG 名称将它存储到一个对象中。

• 然后我尝试查看该对象（使用 console.log）以验证一切正常。 ------ 这是我的问题 ------

• 最后我会将该对象上传到我的数据库中，这样我就可以拥有所有图像的索引。

这是我的代码：

const [imgParaSubir, setImgParaSubir] = useState(null)
const [registroImg, setRegistroImg] = useState({})

const [cargando, setCargando] = useState(false)

const HandleChange = (e) => {
    setImgParaSubir(e.target.files[0])
    setRegistroImg({...registroImg, nombre: e.target.files[0].name})
}



const Upload = (file) => {
    setCargando(true)
    const storageRef = ref(storage, uuidv4());
    uploadBytes(storageRef, file)
        .then((snapshot) => {
            console.log(snapshot)
            setCargando(false)
            getDownloadURL(storageRef).then((url) => {
                setRegistroImg({...registroImg, url: url })
            })
        })
        .catch((err) => {
            console.log(err)
        })
        .finally(() => {
            console.log(registroImg)
            setCargando(false)
            setRegistroImg({})
        })
}

const HandleSubmit = (e) => {
    e.preventDefault()
    Upload(imgParaSubir)
}


return(
    <div>
        <h1>Uploading Section</h1>

        <form onSubmit={HandleSubmit}>
            <input 
                type="file"
                id="imgUpload"
                name="imgUpload"
                onChange={e => (HandleChange(e))}
            />
            <button 
                type="submit"
                disabled={imgParaSubir===null || cargando}
            >Subir</button>
        </form>
    </div>
)

我在重新加载页面后第一次上传 img 时出现问题。 当我上传 img 时，对象 registroImg 只有属性“name”而没有“url”。

但是如果我继续上传更多的 img，对象 registroImg 带有“name”和“url”。

换句话说，第一次上传后一切正常，主要问题是第一个 我不明白为什么。