我如何解决 React.js 上的“警告：遇到两个使用相同密钥的孩子”

Question

我正在尝试使用来自 api 的数据，但是当我尝试呈现数据时，出现此错误：

警告：遇到两个孩子使用相同的密钥 [object Object] 。密钥应该是唯一的，以便组件在更新期间保持其身份。非唯一键可能会导致子项被重复和/或省略——这种行为不受支持，可能会在未来的版本中改变。

这是 CodeSandbox 中的一个原型……可能这是一个简单的事情来解决，但我前几天开始研究反应。你能帮助我吗？

原文由 Rodrigo Dias 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

改变

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

原文由 Leftium 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

问题 当你在 render 函数内的 map 函数中渲染 React 组件时，你必须为每个组件提供一个唯一的 key prop，否则 React 会在控制台中发出警告，并且可能会或可能不会正确更新你的组件。重新渲染。最常见的错误之一是使用对象作为键。无论您传入的对象的具体细节如何，一个对象都会被 React 字符串化为 [object Object]。因此两个完全不同的对象将具有相同的键。如果发生这种情况，您将在控制台中看到类似以下内容的警告：

警告：遇到两个孩子使用相同的键 [object Object]。密钥应该是唯一的，以便组件在更新期间保持其身份。非唯一键可能会导致子项被重复和/或省略——这种行为不受支持，可能会在未来的版本中改变。

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

}

解决方案 关键道具应该是唯一的、稳定的和可重现的。

唯一性：元素的键在其兄弟姐妹中应该是唯一的。密钥不需要是全局唯一的。这是使用对象作为键的问题，因为任何对象的字符串形式总是相同的。

稳定：某个元素的键应该始终相同。这就是使用数组索引会导致错误的原因。如果用户 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/

原文由 tayfun Kılıç 发布，翻译遵循 CC BY-SA 4.0 许可协议