跟踪数组或迭代器中的每个子元素应该有一个唯一的“键”支柱。

Question

我经常在做反应中的事情时遇到这个错误，要想找到问题出在哪里，那就太糟了。有没有人可以在你的UI中找到这些案例呢？

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Constructor`. See https://..... /react-warning-keys for more information.

我刚开始在div中添加key={Math.random} --有什么理由不这样做吗？反应只是需要什么独特的钥匙？

如果是这样的话，我不知道为什么框架不只是在内部这样做；它们已经为每个DIVs生成了假名。

错误消息在指出问题所在方面没有多大帮助：

warning @ react-dev.js:18780validateExplicitKey @ react-dev.js:9316validateChildKeys @ react-dev.js:9378createElement @ react-dev.js:9483render @ Editor.tsx:245_renderValidatedComponentWithoutOwnerOrContext @ react-dev.js:5943_renderValidatedComponent @ react-dev.js:5963ReactCompositeComponent__renderValidatedComponent @ react-dev.js:12346_updateRenderedComponent @ react-dev.js:5916_performComponentUpdate @ react-dev.js:5900updateComponent @ react-dev.js:5829ReactCompositeComponent_updateComponent @ react-dev.js:12346performUpdateIfNecessary @ react-dev.js:5777performUpdateIfNecessary @ react-dev.js:13036runBatchedUpdates @ react-dev.js:13734perform @ react-dev.js:15623perform @ react-dev.js:15623perform @ react-dev.js:13691flushBatchedUpdates @ react-dev.js:13752ReactUpdates_flushBatchedUpdates @ react-dev.js:12346closeAll @ react-dev.js:15689perform @ react-dev.js:15636batchedUpdates @ react-dev.js:8455enqueueUpdate @ react-dev.js:13781enqueueUpdate @ react-dev.js:13371enqueueSetState @ react-dev.js:13537ReactComponent.setState @ react-dev.js:5204(anonymous function) @ Editor.tsx:100v @ zepto.min.js:2S.onreadystatechange @ zepto.min.js:2
OptionPicker.tsx:44template.initValue spot_intro

Answer 1

其原因称为调和，并在react的多个组件文档页中作了解释

当反应和解关键的孩子，它将确保任何有钥匙的孩子将被重新排序(而不是重击)或销毁(而不是重复使用)。

如果您使用Math.random，您每次都会得到一个不同的id，所以react将无法完成它的任务。这个例子出现在react的github问题上，正如Paul‘’Shannessy所指出的：

• 关键不是真正的性能，而是更多的身份(这反过来导致更好的性能)。随机分配和更改的值不是身份。
• 如果不知道您的数据是如何建模的，我们就无法实际地提供密钥。如果您没有ids，我建议您使用某种散列函数。
• 当我们使用数组时，我们已经有了内部键，但是它们是数组中的索引。当您插入一个新元素时，这些键是错误的。

我建议你读一下上面提到的内容。