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

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

Answer 2

Cloud Storage for Firebase没有像实时数据库和Firestore那样的实时侦听器。当对象发生更改时，您不能简单地安排其接收存储中的回调。有意义的是，您必须重新加载页面才能再次获取对象。

您可能会考虑改为使用这些实时数据库产品之一来也存储对对象的更新，并使用该数据的侦听器来知道对象何时更改。

Answer 3

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

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

3 个答案: