Заставить один оператор then () ждать завершения другого

Question

Я использую React и получаю данные из моей базы данных Firestore по моему componentDidMount() методу. У меня есть два then() вызова, один для того, когда данные из БД становятся доступными, и я могу сохранить их, а другой для настройки состояния.

  componentDidMount() {
    db.collection("myCollection")
        .get()
        .then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
                // doc.data() is never undefined for query doc snapshots
                console.log(doc.id, " => ", doc.data().field1);
                allData.push(doc.data());
            })
        })
        .then(
          console.log("Setting State"),
          this.setState({
          isLoaded: true,
          items: allData
        }))
        .catch(function(error) {
            console.log("Error getting documents: ", error);
        });

  }

Однако, когда я запускаю сайт, он сначала пытается установить состояние (второй оператор then()), когда я не хочу, чтобы это делалось до тех пор, пока данные БД не будут сохранены. Я не уверен, как заставить изменение состояния произойти после сохранения данных БД.

Вещи, которые я пробовал:

1) Помещение изменения состояния непосредственно после кода функции, внутри первого then (). Это дает ошибку:

Ошибка при получении документов: TypeError: Невозможно прочитать свойство 'setState' из неопределенного

Answer 1

Вы забыли обернуть установленное состояние и консольный журнал в другую функцию.Без этого вы передаете два аргумента затем, один является результатом console.log, а другой - результатом this.setState.Это синхронные звонки, как вы написали.