从 Firestore 接收图像时如何等待承诺？

Question

我正在使用 React Native 制作应用程序，并将有关用户的信息存储在 Firestore 上名为“User”的集合中。每个用户都有一个存储在集合中的个人资料图片 url，我想在同一页面上显示多个用户图像。但是，由于必须等待 Promise 返回，我正在努力让它工作。

我尝试在检索 url 时将其存储在状态变量中，但是，由于我要显示的图像数量，这将涉及创建大量状态变量。然后我尝试使用 async/await 和 then 语句，但由于承诺没有及时返回，图像不会加载。

async getImg(user_id) {
    return await firebase.firestore().collection('User').doc(user_id).get()
        .then(user => {return user.data().image})

render() {

      <SafeAreaView style={styles.container}> 
          <Image source={{uri: this.getImg('rwWa39Y6xtS1nZguswugODWndqx2') }} style={{ ... }} />
          <Image source={{uri: this.getImg('HQkCoChUe5fkZrHypYdRnrw66Rp2') }} style={{ ... }} />

      </SafeAreaView>
    );

  }

上面的代码是我最近的尝试，由于返回的是promise而不是字符串url，它返回了以下错误。

You attempted to set the key `_65` with the value `1` on an object that is meant to be immutable and has been frozen.

有人知道如何解决这个问题吗？

Answer 1

您正在混合使用 async/await 和 then() 方法。

按照以下方式进行：

async getImg(user_id) {
    const userSnapshot = await firebase.firestore().collection('User').doc(user_id).get()
    return userSnapshot.data().image;
}

您将声明一个异步 getImg() 函数。

我不知道 react-native 所以我不知道它是否可以通过使用它来工作

<Image source={{uri: this.getImg('rwWa39Y6xtS1nZguswugODWndqx2') }} style={{ ... }} />

---

但@VolkanSahin45 解决方案，改编如下，应该可以工作：

async getImg(user_id) {
    const userSnapshot = await firebase.firestore().collection('User').doc(user_id).get()
    this.setState({
      img: userSnapshot.data().image;
    })
}

---

请注意，最好使用try/catch 处理错误，如下所示：

async getImg(user_id) {

  try {
    const userSnapshot = await firebase.firestore().collection('User').doc(user_id).get()
    this.setState({
      img: userSnapshot.data().image;
    })
  } catch (error) {
    this.setState({
      img: 'default_user_img.png';
    })
  }

}

Answer 2

getImg 函数返回 Promise。相反，如果有 img，您可以将 img 保存到 state 并渲染。

async getImg(user_id) {
  return await firebase.firestore().collection('User').doc(user_id).get()
    .then(user => {
        this.setState({
          img: user.data().image 
        })
      }
    )
}

render() {
  const { img } = this.state;
  return(
    <SafeAreaView style={styles.container}> 
      img && <Image source={{ img }} style={{ ... }} />
    </SafeAreaView>
  )
}