reactjs - 如何使用 React 显示来自 firebase 单个文档的数据？

Question

在此之前，我正在使用 Snapshot 并尝试对其进行映射。但是对于单个文档它失败了。在我从 firebase 读回文档后。他们建议对单个文档使用这种方式。但我不知道如何使它在网站上而不是控制台上可读。我想发送有关标题和论文的数据。

const { id } = useParams()

useEffect(() => {
    db.collection("posts").doc(id).get().then(doc => {
        const newData = doc.data();
        console.log(newData);
    });
}, []);

return (
    <div className="log">
            <article className="log-details">
                <div className="author-pic clearfix">
                    <img src={profile} alt="" />
                </div>
                <div className="log-preview">
                    <div class="cover"></div>
                    <h2 className="title clearfix">title here</h2>

                    <div className="details ">
                        <img src={One} alt="" />
                        <p className="essay">essay here</p>
                    </div>
                </div>
            </article>
    </div>
)

标签： reactjsfirebasegoogle-cloud-firestore

Answer 1

要显示帖子数据，请使用 useState 并将 postData 设置为setPostData(newData). 然后，您可以在 return 语句中使用{postData.title}和读取 postData 值。{postData.essay}

不要忘记使用import React, { useState, useEffect } from "react".

const { id } = useParams()
const [postData, setPostData] = useState("");

useEffect(() => {
    db.collection("posts").doc(id).get().then(doc => {
        const newData = doc.data();
        setPostData(newData);
        console.log(newData);
    });
}, []);

return (
    <div className="log">
            <article className="log-details">
                <div className="author-pic clearfix">
                    <img src={profile} alt="" />
                </div>
                <div className="log-preview">
                    <div class="cover"></div>
                    <h2 className="title clearfix">{postData && postData.title}</h2>

                    <div className="details ">
                        <img src={One} alt="" />
                        <p className="essay">{postData && postData.essay}</p>
                    </div>
                </div>
            </article>
    </div>
)