.map()没有定义为函数

Question

我试图使用"。map()"映射文件,我要重火力点。然而，它说.map()不是一个函数。代码如下。基本上，我试图获取我的firebase数据，然后渲染每个文档作为一个元素。

<div{posts.map((doc) => <p>{doc.data().text}</p>)}</div>

如何声明useState posts变量:

const [posts, setPosts] = useState([]);

如何设置useState posts变量

useEffect(() => {
db.collection('posts').onSnapshot((querySnapshot) => {
setPosts(querySnapshot);
});
})

我也试过使用". foreach "。我可以"console。log"使用".forEach"但".forEach"不允许返回元素.

Answer 1

.forEach可以在Sets, Maps和Arrays上使用，而.map只能在数组上使用。因此，querySnapshot很可能返回一个在posts上更新的集合，因为posts现在是Set,map无法迭代并返回可迭代posts的值。为了克服这个问题，可以在更新状态之前将Set转换为数组。

useEffect(() => {
db.collection('posts').onSnapshot((querySnapshot) => {
let querySnapshotToArray = Array.from(querySnapshot)
setPosts(querySnapshotToArray);
});
})

现在post是一个数组，您可以对其进行映射并返回所需的值。

Answer 2

当react组件第一次渲染posts=null或undefined，所以.map是undefined你需要使用可选链接，在JavaScript中由?.表示，这是ES2020中引入的新功能。

<div{posts?.map((doc) => <p>{doc?.data()?.text}</p>)}</div>

Answer 3

首先记录你的querySnapshot，看看它是否是一个数组，然后你应该检查如果posts'数组不是空的。试试这个:

<div{posts.length > 0 ? posts.map((doc) => <p>{doc.data().text}</p>) : null}</div>