如何在不重新加载的情况下更新 firebase 更改

Question

当用户更改他的个人资料图片时，它不会更新，直到他们重新加载页面......这是 y 代码：

const handleProfile = async (e: any) => {

    const file = e.target.files[0]

    const storageRef = firebase

      .storage()

      .ref(`/profile/${user?.id}/${user?.username}`)

    const task = storageRef.put(file)

    task.on('state_changed', () => {

      storage()

        .ref(`/profile/${user?.id}/${user?.username}`)

        .getDownloadURL()

        .then((url) => updateUser({ img: url }))

    })

  }

我试过：

setTimeOut(() => {

location.reload}, 200)

但它不起作用

Answer 1

就像@Stevenson 建议的那样，您可能想将所述对象的下载 URL 存储在 Cloud Firestore 中，并使用 onSnapshot 功能收听其更新。

Answer 2

Cloud Storage for Firebase 没有您在实时数据库和 Firestore 中找到的实时侦听器。您不能简单地安排在存储中的对象发生变化时接收回调。您必须重新加载页面才能再次获取对象，这是有道理的。您可能会考虑使用其中一种实时数据库产品来存储对对象的更新，并使用该数据的侦听器来了解对象何时发生更改。

Answer 3

从标签判断我假设这个应用程序正在使用反应，如果这样更新状态或个人资料图片组件中的道具将导致反应重新渲染，这应该显示新的个人资料图片