我在 React 中做事情时经常遇到这个错误，尝试找出问题所在是 hell 。有人有一些技巧可以帮助您深入用户界面来查找这些案例吗？
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 只需要任何唯一的 key ？
如果是这种情况，我不知道为什么框架不只是在内部这样做；他们似乎已经为每个 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
最佳答案
其原因称为reconcilliation react's Multiple Components doc page 中对此进行了解释:
When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused).
如果你使用Math.random，你每次都会得到一个不同的id，所以react将无法完成它的任务。 This very example出现在 React 的 github issues 中，正如 Paul O’Shannessy 指出的:
- key is not really about performance, it's more about identity (which in turn leads to better performance). randomly assigned and changing values are not identity
- We can't realistically provide keys without knowing how your data is modeled. I would suggest maybe using some sort of hashing function if you don't have ids
- We already have internal keys when we use arrays, but they are the index in the array. When you insert a new element, those keys are wrong.
我建议您阅读上述主题。
关于javascript - 追踪数组或迭代器中的每个子项都应该有一个唯一的 "key"prop，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39050543/