问如何在React.js上解析“警告:遇到两个密钥相同的子”

EN

变化

<h2 key={movie.toString()}>{movie.title}</h2>

至

<h2 key={movie.id}>{movie.title}</h2>

解释：

React要求列表类组件的每一行都有一个唯一的键。它使用此键确定自上次呈现以来更改的内容。否则，列表更改的方式可能会不明确。

movie.toString()并不是唯一的。它计算出每一行的"[object Object]"值。

查看您正在调用的API，您可能需要执行以下更多的操作：

<h2 key={movie.event.id}>{movie.event.title}</h2>

当您在呈现呈现函数内的映射函数中的React组件时，您必须为每个组件提供唯一的密钥支柱，否则React将在控制台中放置警告，并且在组件重发时可能会或不正确地更新您的组件。最常见的错误之一是使用对象作为键。不管传入对象的具体细节如何，对象都会通过对对象对象的反应而变得紧张。所以两个完全不同的对象会有相同的键。如果发生这种情况，您将在控制台中看到类似于以下警告的内容：

警告:遇到两个具有相同键的子对象对象。键应该是唯一的，这样组件就可以在更新中维护其标识。非唯一的键可能会导致子键被复制和/或省略--这种行为是不支持的，并且可能在将来的版本中更改。

render() {
return (
    <div>
        {this.state.users.map(user => (
            <UserComponent user={user} key={user} />
        ))}
    </div>
)

}

另一个常见的错误是对键使用数组索引。

render() {
return (
    <div>
        {this.state.users.map((user, idx) => (
            <UserComponent user={user} key={idx} />
        ))}
    </div>
)

}

解决方案A关键支柱应该是独特的，稳定的和可重复的。

唯一:元素的键在其兄弟姐妹之间应该是唯一的。关键不需要是全球唯一的。这是使用对象作为键的问题，因为任何对象的字符串形式都是相同的。

稳定:某个元素的关键应该总是相同的。这就是为什么使用数组索引会导致错误。如果用户ABC位于索引0，然后移动到索引1，则组件将不会重发，因为键是相同的，即使连接到这些键的数据已经更改。

可复制性:每次都应该能够为对象获取相同的密钥。一般来说，这意味着不对键使用随机值。

在这种情况下，最佳做法是使用支持对象的唯一ID。在本例中，应该存储在数据库中的用户ID。但是，可以使用其他散列函数来获得类似的结果。

render() {
return (
    <div>
        {this.state.users.map((user, idx) => (
            <UserComponent user={user} key={user.id} />
        ))}
    </div>
)

}

https://sentry.io/answers/defining-proper-key-in-props/

变化

<h2 key={movie.toString()}>{movie.title}</h2>

至

<h2 key={movie.id}>{movie.title}</h2>