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