reactjs - react : Unique keys and optimistic updating

Question

在我的 React 应用程序中，我使用数据库 ID 作为键来渲染从服务器返回的项目数组。

items.map(item => <Item key={item.id}/>)

这工作正常，但现在我想做乐观更新，所以我在将新项目提交到服务器之前将其插入数组中，然后在 post 操作完成时添加数据库 ID 。现在，我的数组短暂包含没有 id 的项目，由于缺少键而导致错误。

该怎么办？我知道使用索引作为键被认为是反模式( https://www.menubar.io/react-keys-index/ )，所以这是不可能的。我也不想为这些项目生成新的唯一 ID，因为一旦将它们保存到数据库，它们都会有两个 唯一 ID。我考虑过对未保存的对象使用随 secret 钥，但这似乎是一个不稳定的解决方案。

对于这种情况有最佳实践解决方案吗？我不是第一个遇到这个问题的人。

Answer 1

如果您只是追加到列表中，您可以使用从数组索引派生的 id，并且保证永远不会与后端 id 发生冲突。如果后端有递增的主键或字符串 `New-${index}`，则索引为负值。

或者，由于您无法提前知道后端 id，因此我没有看到其他解决方案，然后使用 uuid 生成器临时生成该项目的 id 。这样的 id 实际上是无冲突的。

使用索引是非常危险的，因为其他项目之一可能已经使用了该 ID。