Получить значение от обещания Firebase в реакции крюка

Question

firebase.js

import config from "./firebaseConfig";
import app from "firebase/app";
import "firebase/firebase-firestore";

class Firebase {
  constructor() {
    app.initializeApp(config);
    this.db = app.firestore();
  }

  getBooks = () =>
    this.db
      .collection("books")
      .get()
      .then(docs => docs.forEach(doc => doc.data()))
      .catch(err => console.error(err));
}

export default new Firebase();

BookCardsContainer.js

import React, { useState, useEffect } from "react";
import BookCards from "./BookCards";
import firebase from "../../firebase";

const BookCardsContainer = () => {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    setBooks(firebase.getBooks());
  }, []);

  console.log(books);

  return <div />;
};

export default BookCardsContainer;

Почему у меня в консоли Promise {} вместо фактического значения, если я использовал then на Promise? У меня есть фактические данные, когда я console.log () в firebase.js.

Answer 1

SetBooks устанавливает стоимость книг на обещание.

firebase.getBooks () возвращает обещание.

так вот почему у вас в книгах есть обещание.

Что вы должны сделать

async function fetchMyAPI() {

  const response = await firebase.getBooks();
  setBooks(response);
}

useEffect(() => {
  fetchMyAPI();
}, []);

Answer 2

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

Чтобы заставить это работать, вы можете попробовать:

useEffect(() => {
    firebase.getBooks().then(books => setBooks(books))
  }, []);