显示 channels[object Object] 而不是实际值答案

【问题标题】：displays channels[object Object] instead of the real values显示 channels[object Object] 而不是实际值
【发布时间】：2021-05-14 23:29:57
【问题描述】：

我正在使用 reactjs 开发一个应用程序。我将默认值设置为数组并从 firebase 获取值数组，但它显示的是对象而不是实际值。如果我控制台来自 firebase 的值，它会显示这些值，但是当我将它添加到通道并循环遍历数组时，它会显示通道 [Object object]

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}
                />
            ))}

这是 firebase 的输出

【问题讨论】：

这只是意味着您的 channel 数据是一个 JSON 对象。您可以尝试控制台记录它并将其粘贴到您的问题中吗？
发生的事情是，您正在将一个对象传递给一个地方字符串。因此，您的对象将转换为字符串 ([Object object])。相反，传递必要的值。 ={channel.property}
@syedmh 我已经更新了我的问题
我刚刚发布了一个答案@mychuks
@syedmh "JSON object" 你的意思是它是一个 JavaScript 对象。

标签： javascript reactjs firebase react-hooks

【解决方案1】：

根据您的console.log，您需要在前端获取此信息的方式是传入channel.channelName 而不是channel。您的代码必须是这样的：

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

它之前没有工作的原因是因为channel 仍然是一个对象，即使它里面只有一个属性。

【讨论】：