TypeError:posts从firebase返回数据是不可迭代的

Question

我刚开始使用react和firebase。我试图从firebase获得帖子：

useEffect(() => {
setLoading(true);
setError(false);
let cancel;
// get posts
var postsRef = firebase.database().ref('/posts/');
postsRef.on('value', function(snapshot) {
setPosts(prevPosts => {     
var posts = snapshot.val();
console.log(posts);
return [...prevPosts,...posts]      
});
});
setLoading(false);
}, [ pageNumber ]);

问题是它给了我：

TypeError：posts在return [...prevPosts,...posts]上不可迭代

有什么想法可以解决吗？这将把数据返回到一个函数，该函数将解析数据，如下所示：

return (
<>
{posts.map((post, index) => {
return <Post key={post.id} id={post.id} ref={ref} img={post.img} titulo={post.titulo} />
})}
</>
)

为什么会出现此错误？如何正确解析数据？谢谢

Answer 1

因为post变量是一个类似于的对象

{
"-M5GmoelPzWryNizVjww": { img: "img/", titulo: "title 1", user: "root" },
"-M5GmsTDcbDYZuoYBVIt": { img: "img/", titulo: "title 2", user: "root" },
"-M5GmxMZMzZe9p5uDuWe": { img: "img/", titulo: "title 3", user: "root" },
"-M5GmyKDbbtxR8Dw3-J2": { img: "img/", titulo: "title 4", user: "root" },
"-M5GmzHjK1PQJ2ulrCTi": { img: "img/", titulo: "title 5", user: "root" },
"-M5Gn2Rsv_OrwL1GkbVG": { img: "img/", titulo: "title 6", user: "user" },
"-M5Gn39y9JDishOdxwi4": { img: "img/", titulo: "title 7", user: "user" }
}

您应该将它以前转换为一个数组，以便将它连接到您以前的帖子列表中。要做到这一点，并使用对象的密钥作为id，您可以使用：

return [...prevPosts, ...Object.keys(posts).map(key => ({
id: key,
...posts[key]
}))];