我正在尝试使用 api 中的数据，但是当我尝试渲染数据时，我收到此错误：
警告：遇到两个孩子使用相同的密钥，
[object Object]。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一键可能会导致子项被重复和/或省略——这种行为不受支持，并且可能在未来的版本中发生变化。
这里有一个原型在CodeSandbox... 可能解决起来很简单，但我前几天开始研究react。你能帮帮我吗？
【问题讨论】：
key 属性添加到看起来像 div 元素的部分。正如警告消息所暗示的那样，React 只允许 key 的唯一值，因此如果您尝试将相同的 key 值存储在多个子元素上，您将收到此消息。
标签： javascript reactjs
改变
<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>
【讨论】：
问题 当您在 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>
)
}
【讨论】：
改变
<h2 key={movie.toString()}>{movie.title}</h2>
到
<h2 key={movie.id}>{movie.title}</h2>
【讨论】：
这是一个 ReactJS 属性，当您映射到数组以创建组件列表时（就像您在 pages/main/index.js 上所做的那样生成 h2 ）你的密钥应该是唯一的，我认为你“正在获取电影 2 次（或更多）这使得密钥不唯一（因为你使用电影名称作为密钥），所以要避免问题，尝试使用map循环索引，会更好。
{this.state.movies.map(( movie , index ) => (
<h2 key={index}>{movie.title}</h2>
))}
【讨论】：
如果你在 react 中渲染任何列表，你的每个组件都必须有一个唯一的标识符作为键。
在您的页面中 -> 主页面 -> index.js
你有这个
{this.state.movies.map(movie => {
return <h2 key={movie.toString()}>{movie.title}</h2>;
})}
这里你需要传递一些独特的东西给key而不是movie.toString()。
【讨论】：