即使在控制台中获取数据后，我的“帖子”状态也没有呈现答案

【问题标题】：my 'posts' state is not rendering even after getting data in console即使在控制台中获取数据后，我的“帖子”状态也没有呈现
【发布时间】：2021-09-20 10:29:51
【问题描述】：

从 'react' 导入 React, { useState, useEffect } 从“../../Firebase”导入 { db}

导入“../../styles/students.css”

函数学生（）{

const [posts, setposts] = useState([])
useEffect(() => {
    db.collection('students').onSnapshot(snapshot => {

        setposts(snapshot.docs.map(doc => (doc.data().email)))
        console.log(snapshot.docs.map(doc => (doc.data().email)))
        console.log(posts)
    })


}, [])

return (
    <div>
        <h1>WELCOME STUDENTS</h1>
        <div className="contianer students">
            {posts.map((item) => {

                <h1>{item.email}</h1>
            })
            }
        </div>


    </div>
)

}

导出默认学生

【问题讨论】：

标签： reactjs

【解决方案1】：

你忘了在地图中使用return关键字

使用这个

<div>
    <h1>WELCOME STUDENTS</h1>
    <div className="contianer students">
        {posts.map((item) => {

            return (<h1>{item.email}</h1>)
        })
        }
    </div>
</div>

或

<div>
    <h1>WELCOME STUDENTS</h1>
    <div className="contianer students">
        {posts.map((item) =>  <h1>{item.email}</h1>)
        }
    </div>
</div>

【讨论】：

如果您觉得有帮助，请点赞回答

【解决方案2】：

const [posts, setposts] = useState([])
useEffect(async() => {
    await db.collection('students').onSnapshot(snapshot => {

        setposts(snapshot.docs.map(doc => (doc.data().email)))
        console.log(snapshot.docs.map(doc => (doc.data().email)))
        console.log(posts)
    })


}, [])

return (
    <div>
        <h1>WELCOME STUDENTS</h1>
        <div className="contianer students">
            {posts.map((item) => {

               return <h1>{item.email}</h1>
            })
            }
        </div>


    </div>
)
}

您忘记在 Map 函数中写入 Return 语句。使用Async 函数和Await。同步其推荐的方法。

【讨论】：