React:独特的"关键"道具

Question

我收到此错误消息,虽然我的列表元素确实有一个键:(

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

非常感谢任何帮助:)

Answer 1

你确定,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>
        )
    })