firebase 对象作为 React 子对象无效，如果要渲染子对象集合，请改用数组答案

【问题标题】：firebase Objects are not valid as a React child, If you meant to render a collection of children, use an array insteadfirebase 对象作为 React 子对象无效，如果要渲染子对象集合，请改用数组
【发布时间】：2021-02-08 10:41:00
【问题描述】：

我正在开发一个带有 firebase 的 React 应用程序。当我尝试从数据库中检索我的消息时，我收到以下错误

“对象作为 React 子级无效，如果您要渲染一组子级，请改用数组。”

我的代码

const [channels, setChannels] = useState([]);
 useEffect(() => {
    db.collection('channels').onSnapshot((snapshot) =>
        setChannels(
            snapshot.docs.map((doc) => ({
                id: doc.id,
                channel: doc.data()
            }))
        )
    );
}, [])

我的组件渲染

 {channels.map(({ channel, id }) => (
                    <SidebarChannel
                        key={id}
                        id={id}
                        channelName={channel}
                    />
                ))}

输出

 channels[object Object],[object Object],[object Object]

【问题讨论】：

这个错误可能是你的组件的返回/渲染函数引起的。在此处发布以获得更多帮助。
是的，请添加您的组件实现，感觉应该像在某处写 {channels[0]} 那样简单，这将呈现一个对象
频道的结构是什么？它似乎不是一个数组....
console.log（频道类型）

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

因此，您在 JSX 中（在您的渲染函数中）输出的任何内容都必须是有效的反应子节点（文本、数字、HTML 节点..）或有效反应子节点的数组。

因此，既然 React 告诉您“对象作为 React 子级无效，如果您要渲染子级集合，请改用数组。”

这意味着您正在渲染的是一个对象，而不是文本、数字或数组。

如果不是频道，请查看 SidebarChannel 组件并检查是否存在相同问题。

【讨论】：