从反应钩子中的firebase承诺中获取价值答案

【问题标题】：Get value from firebase promise in react hook从反应钩子中的firebase承诺中获取价值
【发布时间】：2019-03-05 21:32:29
【问题描述】：

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 {} 而不是实际值？当我在 firebase.js 中使用 console.log() 时，我有实际数据。

【问题讨论】：

标签： javascript reactjs firebase react-hooks

【解决方案1】：

SetBooks 将书籍的价值设置为承诺。

firebase.getBooks() 返回一个承诺。

所以这就是为什么你在书中有一个承诺。

你应该怎么做

async function fetchMyAPI() {

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

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

【讨论】：

【解决方案2】：

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

要使其正常工作，您可以尝试：

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

【讨论】：