Непонятно, как использовать асинхронные и ждать в реакции родного

Question

Я недавно начал углубляться в использование React Native с Expo в стороннем проекте.Я хотел загрузить данные асинхронно из Firebase и добился этого после множества попыток и поиска в Google, но до сих пор не до конца понимаю, как это работает.

 componentDidMount = async() => {
      await ref.once('value', async (snapshot) => {
      let imageUrl = [];
      snapshot.forEach(function(urlSnapshot) {
        imageUrl.push(urlSnapshot)
      });
      this.setState({ items : imageUrl});
    });
  }

На следующем изображении я понимаю, что говорю componentDidMountзапускать асинхронно через ключевое слово async ().Я также понимаю, что функция просит, чтобы функция ожидала результатов однократного запроса, но я не понимаю, как использовать асинхронный вызов при вызове функции для возврата снимка.Там могут быть документы или вопросы, которые покажут вам, как это сделать, но нет никого, кто бы ответил, как это работает, и я бы хотел понять.

Answer 1

ref.once() ( ссылка на документы API ) возвращает обещание, которое разрешается после завершения запроса к базе данных. Вы также можете предоставить обратный вызов, как вы делаете сейчас, но в асинхронной функции это только усложняет ситуацию. Вы должны только использовать вместо этого возвращенное обещание. Это облегчит чтение вашего кода.

Кроме того, в какой-то момент вы должны вызывать val(), чтобы преобразовать дочерний снимок в нечто, фактически являющееся строкой. Я догадываюсь, когда это должно произойти, но так как вы не предоставили структуру своей базы данных, узнать наверняка невозможно.

const snapshot = await ref.once('value');
const urls = [];
snapshot.forEach(urlSnapshot => {
    urls.push(urlSnapshot.val());
});
this.setState({ items: urls });