Question

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

react.js：18745警告：数组或迭代器中的每个子节点都应该有一个唯一的“key”prop。检查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>
        )
    })

Answer 2

您的段落（p）也是经常性的项目。您也可以为段落添加键。这些键可以修复（例如第一段的'body'和第二段的'ts'或'timestamp'）。

React：独特的“关键”道具

2 个答案: