React + Firestore: вернуть переменную из запроса

Question

Я сейчас изучаю React и Firestore и немного застрял.Я пытаюсь получить имя пользователя из коллекции пожарного магазина, выполнив поиск по его uid.

Следующий код выполняется на карте «уроков» для создания списка.

{lesson.post_author && findName(lesson.post_author)}

Следующий код представляет собой функцию findName.

let findName = uid => {
    firebase.firestore().collection("users")
      .where('uid', '==', uid)
      .get()
      .then(querySnapshot => {
          console.log(querySnapshot.docs[0].data().name);
    });

  };

В настоящее время функция findName будет успешно регистрировать все имена консоли.Я изменил код, чтобы иметь возможность консольного журнала за пределами вызова firestore, но это возвращает обещание, ожидающее в консоли.

Цель кода - вернуть имя, а не идентификатор в списке.

Любая помощь будет принята с благодарностью.Спасибо!

Answer 1

Как объяснили другие, вы не можете вернуть это значение, так как оно загружается из Firestore асинхронно.К моменту запуска return данные еще не загружены.

В React вы справляетесь с этим, переводя данные в состояние компонента и используя его оттуда.Если вы сделаете это, ваш метод рендеринга может просто забрать его из состояния, например:

{lesson.post_author && findName(lesson.post_author_name)}

(в вышеприведенном предположении lesson косвенно приходит из состояния.

Намного проще, если мы представим, что есть только один урок, и у вас есть эти значения прямо в состоянии:

{state.post_author && findName(state.post_author_name)}

Теперь я предполагаю, что у вас уже есть post_author, и вам просто нужно посмотреть вверхимя автора. Это означает, что где-то в / после componentDidMount вы загрузите дополнительные данные и добавите их в состояние:

componentDidMount() {
  firebase.firestore().collection("users")
    .where('uid', '==', this.state.uid)
    .get()
    .then(querySnapshot => {
      this.setState({ post_user_name: querySnapshot.docs[0].data().name });
  });
}

Теперь загрузка данных по-прежнему происходит асинхронно, поэтому вызовsetState() происходит через некоторое время после завершения componentDidMount. Но React знает, что изменение состояния может потребовать обновления компонента, поэтому он реагирует на вызов setState() путем его повторной визуализации.

Обратите внимание, что я настоятельно рекомендую использовать UID каждого пользователя в качестве идентификатора документов в users. Таким образом, вам не нужен запрос, и вы можете просто выполнить прямой поиск:

componentDidMount() {
  firebase.firestore().collection("users")
    .doc(this.state.uid)
    .get()
    .then(doc => {
      this.setState({ post_user_name: doc.data().name });
  });
}

Answer 2

Я пытаюсь получить имя пользователя из коллекции пожарного магазина, выполнив поиск по его идентификатору.

Это достигается с помощью асинхронного .get метода на ссылку Firestore.В вашем случае, вероятно, у вас есть users коллекция firebase.auth().currentUser.uid именованных документов.

var userRef = firebase.firestore().collection('users').doc(users.uid);
userRef.get().then(function(doc) {
    if (doc.exists) {
        console.log("Users first name is:", doc.data().firstName);
    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
}).catch(function(error) {
    console.log("Error getting document:", error);
});