Как дождаться обещания разрешить и обновить состояние

Question

Вот как выглядит мой код:

constructor(props) {
    super(props);
    this.state = {
      docs: []
    };
  }

  async componentDidMount() {
    await this.quizes();
    console.log(this.state.docs);
  }

  quizes = () => {
    firebase
      .firestore()
      .collection("quiz")
      .get()
      .then(result => {
        const docs = result.docs.map(doc => {
          return { uid: doc.id, ...doc.data() };
        });
        this.setState({ docs });
      });
  };

В настоящее время console.log(this.state) возвращает пустые документы, когда я пытаюсь обновить его документами из firestore.

Answer 1

Чтобы await ваша quizes функция также должна быть async и использовать синтаксис await, а не обещания.

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

constructor(props) {
    super(props);
    this.state = {
      docs: []
    };
  }

  async componentDidMount() {
    await this.quizes();
  }

  quizes = async () => {
    let result = await firebase.firestore().collection("quiz").get()

    const docs = result.docs.map(doc => {
          return { uid: doc.id, ...doc.data() }
    });

    return this.setState({ docs }, () => {
        console.log(this.state.docs);
    });

  };

РЕДАКТИРОВАТЬ: setState использует обратный вызов. Чтобы гарантировать, что состояние было установлено во время регистрации, используйте функцию обратного вызова в функции quizes.

Answer 2

setState является асинхронным. Если вы уверены, что ваша коллекция не пуста, вы можете увидеть свое состояние, используя:

this.setState({ docs }, () => console.log(this.state);

Функция в качестве второго аргумента setState запускается только после выполнения асинхронной задачи установки состояния, Таким образом, вы увидите обновленное состояние.