Javascript 反应：独特；“关键”；道具

我收到此错误消息，尽管我的列表元素确实有一个键：（

react.js:18745警告：数组或迭代器中的每个子级都应该有一个唯一的“key”属性。请检查

Thread

的呈现方法

这是我的密码：

render: function () {
    var messages = this.state.messagesCache.map(message => {
        return (message.own) ? (
            <li className="row own" key={message.id}>
                <p className="own message-body own-message-background small-5 medium-7 large-9 columns">
                    {message.body}
                </p>
                <p className="message-time small-2 large-1 columns">
                    {getTimePassed(message.timestamp)}
                </p>
            </li>
        ) : (
            <li className="row foreign" key={message.id}>
                <p className="foreign message-body foreign-message-background small-5 medium-7 large-9 columns">
                    {message.body}
                </p>
                <p className="message-time small-2 large-1 columns">
                    {getTimePassed(message.timestamp)}
                </p>
            </li>
        )
    })
    return this.state.currentThread ? (
        <div className="full-width">
            <ul className="inline-list uiScrollableArea">
                {messages}
            </ul>
            <form onSubmit={this.handleSubmit} className="row" action="">
                <input className="small-12 columns" id={this.state.currentThread} autoComplete="off"
                       placeholder="input new message"/>
            </form>
        </div>
    ) : (
        <div>
            {"choose a thread to display"}
        </div>
    )
}

render:function（）{
var messages=this.state.messagesCache.map（message=>{
返回（message.own）(


{message.body}


{getTimePassed（message.timestamp）}


) : (


{message.body}


{getTimePassed（message.timestamp）}


)
})
是否返回此.state.currentThread(

{消息}

) : (
{“选择要显示的线程”}
)
}

---

非常感谢您的帮助：）

您确定，

message.id

总是唯一的。如果没有,

尝试：

var messages=this.state.messagesCache.map（（消息，索引）=>{
返回（message.own）(


{message.body}


{getTimePassed（message.timestamp）}


) : (


{message.body}


{getTimePassed（message.timestamp）}


)
})

您的段落（p）也是重复出现的项目。您还可以向段落添加关键字。这些键可以固定（例如，第一段为“body”，第二段为“ts”或“timestamp”）

怎么了

{“选择要显示的线程”}

？为什么不选择一个线程来显示？@JuanMendes正在工作。稍后我会补充一些更有意义的东西：）你是对的！经过几个小时的研究，我发现ID有时其实并没有什么不同。非常感谢：）

var messages = this.state.messagesCache.map((message,index) => {
        return (message.own) ? (
            <li className="row own" key={index}>
                <p className="own message-body own-message-background small-5 medium-7 large-9 columns">
                    {message.body}
                </p>
                <p className="message-time small-2 large-1 columns">
                    {getTimePassed(message.timestamp)}
                </p>
            </li>
        ) : (
            <li className="row foreign" key={index}>
                <p className="foreign message-body foreign-message-background small-5 medium-7 large-9 columns">
                    {message.body}
                </p>
                <p className="message-time small-2 large-1 columns">
                    {getTimePassed(message.timestamp)}
                </p>
            </li>
        )
    })