Question

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

login: required

第一个日志方法如下所示：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> ) } } 第二种日志方法如下：1. return: [{"channel":{"id":1,"name":"asdf"}}]

但是在运行此代码时，我收到一条错误消息，即每个孩子都应该有一个唯一的“密钥”。问题似乎是当我使用{"channel":{"id":1,"name":"asdf"}}时，对象是空的。由于我在证明它之前只记录了三行，因此不一定存在其他问题。我是JavaScript的新手，尤其是React。

我的语法或我尝试访问chan.id值的方式有问题吗？

Answer 1

使用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>
        )
    }
}

即使先前的日志记录证明它不是，反应渲染（）内的对象似乎是空的

1 个答案: