时间戳

首页 > 解决方案 > 需要帮助解决从 Firebase 数据库中获取单个文档作为详细页面的问题

reactjs - 需要帮助解决从 Firebase 数据库中获取单个文档作为详细页面的问题

问题描述

在此处输入图像描述

我试图从集合“书籍”下的 Firebase 数据库中获取单个文档作为详细信息，但是由于渲染产生“未定义”，我的数组方法映射无法识别为函数。不知何故再次渲染并在日志中产生对象值。我把上面的日志截图贴出来了，希望有人能帮帮我，谢谢！！！！！！

import React, {useState, useEffect} from 'react'
import {Link} from 'react-router-dom'
import firebase from '../config/fbConfig'

const BookDetails = (props) => {
    const [books, setBooks] = useState([]) 
        useEffect(() => {
            const db = firebase.firestore()
            const id = props.match.params.id
            var docRef = db.collection("books").doc(id);
                docRef.get().then(doc => {
                    if(doc.exists){
                        const data = doc.data()
                        console.log("Document data:", data)
                        setBooks(data)
                    }else {
                        console.log("No such document!");
                    }
                }).catch(error => {
                        console.log("Error getting document:", error);
                })
        }, [])
               console.log('this log is before return', books.title)
    return (
        
        <div className="book_details">
            <Link to="/"><h2>Home</h2></Link>     
                {console.log("this log is in the return method", books.title)}
            <h1>The Summary Of the Book </h1>
                {books.map( book => <ul key = "book.id" >
                    <li>Book Title: {book.title}</li>
                    <li>Book Author: {book.author}</li>
                    <li>Book Summery: {book.brief}</li>
                </ul>)}
        </div>
    )
}



export default BookDetails

标签： reactjsfirebasegoogle-cloud-firestoreuse-effect

解决方案

因为您正在测试是否books未定义并且仅在已定义的情况下调用 map 函数（即{books && books.map( [...] )}），所以问题必须出在其他地方。

您正在从 Firebase 数据库中获取单个文档。map因此，返回的数据将不是一个数组，而是一个原型中没有函数的对象。您可以从控制台日志中验证这一点。

您的组件呈现两次，因为您正在更改其状态useEffectvia setBooks(data)。

推荐阅读