javascript - React:独特的 “key” Prop

虽然我的列表元素确实有一个键:(

react.js:18745警告:数组或迭代器中的每个子代都应具有唯一的“键”属性。检查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>
    )
}

非常感谢您的帮助:)

最佳答案

您确定message.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>
        )
    })