[英]Get value from firebase promise in react hook
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 將書籍的價值設置為承諾。
firebase.getBooks() 返回一個承諾。
所以這就是為什么你在書中有一個承諾。
你應該做什么
async function fetchMyAPI() {
const response = await firebase.getBooks();
setBooks(response);
}
useEffect(() => {
fetchMyAPI();
}, []);
您正在處理異步數據,您必須等待承諾解決,然后才能像您期望的那樣工作。 取書需要一段時間,所以有一個延遲,直到書到了,你所擁有的就是書最終會到的承諾。
要使其正常工作,您可以嘗試:
useEffect(() => {
firebase.getBooks().then(books => setBooks(books))
}, []);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.