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

Question

我正在尝试使用 api 中的数据，但是当我尝试渲染数据时，出现以下错误：

\n\n

\n

警告：遇到两个孩子使用同一把钥匙，[object Object]。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一的键可能会导致子项重复和/或省略 \xe2\x80\x94 该行为不受支持，并且可能在未来版本中更改。

\n

\n\n

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

\n

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>