【发布时间】：2021-05-10 17:23:51
【问题描述】：
这个错误我已经有一段时间了
Error: Objects are not valid as a React child (found: object with keys {id, msg}). If you meant to render a collection of children, use an array instead.
我已经找出了罪魁祸首：
useEffect(() => {
db.collection("msgs")
.onSnapshot((snapshot) => {
setMessages(
snapshot.docs.map((doc) => ({
id: doc.id,
msg: doc.data(),
}))
);
});
}, []);
doc.data() 是一个对象而不是字符串，所以当我出去渲染它时：
{messages.map((msg, id) => {
return (
<Message key={id} msg={msg} />
);
})}
它会抛出上面的错误。
我正在关注这个 github 仓库：https://github.com/leopaul29/facebook-messenger-clone/blob/master/src/App.js
有什么想法吗？
【问题讨论】：
-
你能显示
id和data的值吗？ -
当我 console.log(doc.data()) 它返回一个带有字符串“hello”的对象（这是我在文本框中输入的内容）。当我 console.log(id) 它返回 0, 1, 2, 3... 这是与正在发送的消息相关联的数字。这都是使用firebase firestore。 Doc.data() 应该可以工作，但事实并非如此。