javascript - 在 React Hook 中从 firebase promise 获取值(value)

标签 javascript reactjs firebase react-hooks

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() 时,我有实际数据。

最佳答案

SetBooks 将书籍的值(value)设定为 promise 。

firebase.getBooks() 返回一个 promise 。

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

你应该做什么

async function fetchMyAPI() {

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

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

关于javascript - 在 React Hook 中从 firebase promise 获取值(value),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55011944/

相关文章:

php - Firebase 身份验证 JS/PHP

node.js - 当 VsCode 中没有检测到 "problems"时,这些 AngularCli 错误意味着什么?

javascript - 使用 Dropbox 的 zxcvbn 密码强度估计器

javascript - 抑制 onclick 链接事件而不停止实际页面重定向

javascript - 当用户清除浏览器缓存时如何调用函数

reactjs - @types/prop-types/index 没有默认导出

javascript - TypeError : Super expression must be null or a function, 未使用 Babeljs 定义

javascript - 这行代码出了什么问题? ( react ,生命游戏)

javascript - react 事件未触发

javascript - Firebase + backbone : difference between collection. create() 和 collection.push()?