Как дождаться обещания при получении изображения из Firestore?

Question

Я создаю приложение, используя React Native, и храню информацию о пользователях в коллекции под названием «Пользователь» в Firestore. У каждого пользователя есть коллекция изображений профиля, сохраненная в коллекции, и я хочу отобразить несколько пользовательских изображений на одной странице. Однако я изо всех сил пытаюсь заставить это работать из-за того, что приходится ждать возврата Promises.

Я пытался сохранить URL-адрес в переменной состояния при ее получении, однако это потребовало бы создания множествапеременные состояния из-за количества изображений, которые я хочу отобразить. Затем я попытался использовать async / await и затем операторы, но изображения не загружались из-за обещаний, не возвращающихся вовремя.

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

  }

Приведенный выше код является моей последней попыткой, и он возвращает следующую ошибку из-за возврата обещания вместо строки 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() функцию.

Я не знаю реакционно-нативный, поэтому не знаю, сработает ли он, используя ее в

<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.

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