React:独一无二的"键“;道具

React: unique "key" prop

本文关键字：道具 quot 独一无二 React 更新时间：2023-11-20

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

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

非常感谢您的帮助：）

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

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