javascript - 从 Firestore 收到图像时如何等待 promise ？

Question

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

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

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';
    })
  }

}