Javascript 对象在react render（）中似乎为空，即使之前的日志记录证明它为'；不是

我的React应用程序中有此组件：

class ChannelList extends React.Component {
    render() {
        console.log("1. return: " + JSON.stringify(this.props.channels));
        return (
            <ul>
                {this.props.channels.map(chan => {
                    console.log(JSON.stringify(chan));
                    return (
                        <Channel
                            key={chan.id}
                            channel={chan}
                            {...this.props} // Pass all properties
                        />
                    )
                })}
            </ul>
        )
    }
}

类ChannelList扩展React.Component{
render（）{
log（“1.return:+JSON.stringify（this.props.channels））；
返回(

{this.props.channels.map（chan=>{
log（JSON.stringify（chan））；
返回(
)
})}

)
}
}

第一个log方法如下：

1。return:[{“channel”：{“id”：1，“name”：“asdf”}}]

第二个日志方法如下：

{“channel”：{“id”：1，“name”：“asdf”}}

但当运行这段代码时，我得到一条错误消息，即每个子级都应该有一个唯一的“密钥”。 问题似乎是，当我使用

chan.id

时，对象是空的。 因为我在证明它不是之前只记录了三行，所以这肯定还有其他问题。我对JavaScript基本上是新手，尤其是对它的反应

我的语法或试图访问th

id

值的方式是否有问题？

使用chan.channel.id

class ChannelList extends React.Component {
    render() {
        console.log("1. return: " + JSON.stringify(this.props.channels));
        return (
            <ul>
                {this.props.channels.map(chan => {
                    console.log(JSON.stringify(chan));
                    return (
                        <Channel
                            key={chan.channel.id}
                            channel={chan}
                            {...this.props} // Pass all properties
                        />
                    )
                })}
            </ul>
        )
    }
}

类ChannelList扩展React.Component{
render（）{
log（“1.return:+JSON.stringify（this.props.channels））；
返回(

{this.props.channels.map（chan=>{
log（JSON.stringify（chan））；
返回(
)
})}

)
}
}

是的，你实际上没有注意到你记录的对象：）用我的头撞了一个小时，却没有看到明显的问题。谢谢