从React Hook中的Firebase Promise获取价值

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，为什么我在控制台中有保证{}而不是实际值？当我在firebase.js。

setBooks将书籍的价值设置为诺言。

firebase.getBooks（）返回承诺。

所以这就是为什么您在书中有诺言。

您应该做什么

async function fetchMyAPI() {
  const response = await firebase.getBooks();
  setBooks(response);
}
useEffect(() => {
  fetchMyAPI();
}, []);

您正在处理异步数据，您必须等待承诺解决，然后才能像您期望的那样工作。取书需要一段时间，所以延迟了，直到书籍到达您所拥有的一切都是书籍最终会到来的承诺。

要使此工作可以尝试：

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