Reactjs 反应：唯一键和乐观更新

在我的React应用程序中，我使用数据库id作为键呈现从服务器返回的项目数组

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

items.map（item=>）

这很好，但现在我想进行乐观更新，所以我在将新项目提交到服务器之前将其插入数组中，然后在post操作完成后添加数据库id。现在，我的数组简要地包含了由于缺少键而导致错误的没有id的项

怎么办？我知道使用索引作为键被认为是一种反模式（），所以这是不可能的。我也不想为项目生成新的唯一id，因为一旦它们保存到数据库中，它们都将具有两个唯一id。我曾考虑对未保存的对象使用随机键，但这似乎是一个不可靠的解决方案

---

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

因为数据库中正在更新的项目的

id

很可能会在成功的post请求中更改，所以您可以使用

索引作为这些特定项目的键，例如

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

items.map（（项目，索引）=>）

使用上述方法的一个可能的缺点是当您的
项.id
与
索引
一致时，因此根据您的用例，您可以选择使用
索引
或
随机id
，仅用于数据库中尚未更新的项

另外，请确保您没有在渲染中生成
随机ID
方法，因为它会导致性能问题，导致组件
在每一个重新装载机上重新装载

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

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

使用索引是非常危险的，因为其他项目之一可能已经使用了该id。
正如您所说，问题在于保证唯一性。索引和随机id都不能保证与某个id不一致。您可以使用uuid生成唯一id，该id是一个随机唯一值