在我的React应用程序中，我使用数据库ID作为键，渲染从服务器返回的一系列项目。
items.map(item => <Item key={item.id}/>)
这很好，但是现在我想进行乐观更新，所以我在将新项目提交到服务器之前将新项目插入到数组中，然后在发布操作完成后添加数据库ID 。现在，我的数组暂时包含由于缺少键而没有id导致错误的项目。
怎么办？我知道使用索引作为键被认为是反模式（https://www.menubar.io/react-keys-index/），所以这是不可能的。我也不想为这些项目生成新的唯一ID，因为一旦将它们保存到数据库中，它们都将具有两个唯一ID。我考虑过对未保存的对象使用随机密钥，但这似乎是一个不稳定的解决方案。
这种情况是否有最佳实践解决方案？我不能成为第一个遇到这个问题的人。
答案 0 :(得分：2)
由于数据库中正在更新的项目的id很可能会在成功发布请求时发生更改，因此您可以使用index作为
items.map((item, index) => <Item key={item.id || index}/>)
使用上述方法的一个可能的缺点是，当您item.id之一与index重合时，根据您的使用情况，您可以选择使用index或{{1仅适用于那些尚未在数据库中更新的项目。
P.S。确保您没有在渲染中生成
randomId方法因为它导致导致组件的性能问题 每次重新渲染时重新安装
答案 1 :(得分：2)
如果您只是附加到列表，则可以使用从数组索引派生的id，并保证永远不会与后端ID冲突。如果您在后端增加主键或字符串`New-${index}`，则将索引视为负值。
或者，因为您事先无法知道后端id，所以我没有看到其他解决方案，然后使用uuid生成器为该项暂时生成id。这样的id几乎没有碰撞。
使用索引非常危险，因为其他项目之一已经可以使用该ID。