gpt4 book ai didi

javascript - 对象在 react render() 内部似乎是空的,即使之前的日志记录证明它不是

转载 作者:行者123 更新时间:2023-11-30 15:58:34 26 4
gpt4 key购买 nike

我的 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>
)
}
}

第一个日志方法是这样的:1。返回:[{"channel":{"id":1,"name":"asdf"}}]第二种日志方式是这样的:{"channel":{"id":1,"name":"asdf"}}

但是当运行这段代码时,我收到一条错误消息,每个 child 都应该有一个唯一的“ key ”。问题似乎是当我使用 chan.id 时对象是空的。因为我只记录了三行就证明它不是,所以一定有其他问题。总的来说,我是 JavaScript 的新手,尤其是 React。

我的语法或我尝试访问 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>
)
}
}

关于javascript - 对象在 react render() 内部似乎是空的,即使之前的日志记录证明它不是,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38105263/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com