数组或迭代器中的每一个子元素都应该有一个唯一的“键”.道具

tracking down Each child in an array or iterator should have a unique "key" prop

本文关键字：唯一 有一个 道具 迭代器 每一个 元素 数组      更新时间：2023-09-26

我在react中做事情时经常遇到这个错误，并且很难尝试跟踪问题所在。有没有人有关于挖掘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.

我已经开始添加key={Math.random}到div -有任何理由不这样做吗?React只需要唯一的键?

如果是这样的话，我不知道为什么框架不只是在内部做;他们似乎已经为每个div生成了假名…

错误信息在指示问题所在方面不是很有帮助:

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

原因叫做对账，在react的Multiple Components文档中有解释:

当React调和键化的子元素时，它将确保任何带有key的子节点将被重新排序(而不是重击)或销毁(而不是重复使用)。

如果你使用Math.random，你每次都会得到一个不同的id，所以react将无法完成它的技巧。这个例子出现在react的github问题中，正如Paul O ' shanessy指出的:

  • 键实际上与性能无关，它更多的是关于身份(这反过来又会导致更好的性能)。随机分配和变化值不是标识
  • 如果不知道你的数据是如何建模的，我们就不能实际地提供密钥。我建议使用某种哈希函数你没有id
    • 当我们使用数组时，我们已经有了内部键，但它们是数组中的索引。当您插入一个新元素时，这些键是错了。

我建议你看一下前面提到的帖子

相关文章：