React：唯一键和乐观更新
React: Unique keys and optimistic updating
在我的 React 应用程序中，我使用数据库 ID 作为键来呈现从服务器返回的项目数组。
items.map(item => <Item key={item.id}/>)
这很好，但现在我想做乐观更新，所以我在将新项目提交到服务器之前将它们插入数组中，然后在[=24=时添加数据库id ]操作完成。现在我的数组暂时包含没有 id 的项目，由于缺少键而导致错误。
怎么办？我知道使用索引作为键被认为是一种反模式 (https://www.menubar.io/react-keys-index/)，所以这是不可能的。我也不想为这些项目生成新的唯一 ID，因为一旦它们被保存到数据库中，它们都会有 两个 唯一 ID。我考虑过对未保存的对象使用随机密钥，但这似乎是一个不稳定的解决方案。
是否有针对这种情况的最佳实践解决方案？我不是第一个遇到这个问题的人。
由于数据库中正在更新的项目的 id 很可能会在 post 请求成功时发生变化，您可以使用 index 作为那些特定项目的键，例如
items.map((item, index) => <Item key={item.id || index}/>)
使用上述方法的一个可能缺点是当您的 item.id 与 index 重合时，因此根据您的用例，您可以选择使用 index 或 randomId 仅针对那些尚未在数据库中更新的项目。
P.S. Make sure you are not generating a randomId in the render
method since it leads to performance issues causing the component to
remount on every rerender
如果您只追加到列表中，您可以使用从数组索引派生的 id，并且保证永远不会与后端 id 冲突。如果您在后端或字符串 `New-${index}`.
中有递增的主键，则类似于索引的负值
或者，因为您无法提前知道后端 id，所以我没有看到其他解决方案，然后使用 uuid 生成器为该项目临时生成 id。这样的 id 实际上是无冲突的。
使用索引非常危险，因为其他项目之一可能已经在使用该 ID。
在我的 React 应用程序中，我使用数据库 ID 作为键来呈现从服务器返回的项目数组。
items.map(item => <Item key={item.id}/>)
这很好，但现在我想做乐观更新，所以我在将新项目提交到服务器之前将它们插入数组中，然后在[=24=时添加数据库id ]操作完成。现在我的数组暂时包含没有 id 的项目，由于缺少键而导致错误。
怎么办？我知道使用索引作为键被认为是一种反模式 (https://www.menubar.io/react-keys-index/)，所以这是不可能的。我也不想为这些项目生成新的唯一 ID，因为一旦它们被保存到数据库中，它们都会有 两个 唯一 ID。我考虑过对未保存的对象使用随机密钥，但这似乎是一个不稳定的解决方案。
是否有针对这种情况的最佳实践解决方案？我不是第一个遇到这个问题的人。
由于数据库中正在更新的项目的 id 很可能会在 post 请求成功时发生变化，您可以使用 index 作为那些特定项目的键，例如
items.map((item, index) => <Item key={item.id || index}/>)
使用上述方法的一个可能缺点是当您的 item.id 与 index 重合时，因此根据您的用例，您可以选择使用 index 或 randomId 仅针对那些尚未在数据库中更新的项目。
P.S. Make sure you are not generating a
randomIdin the render method since it leads to performance issues causing the component to remount on every rerender
如果您只追加到列表中，您可以使用从数组索引派生的 id，并且保证永远不会与后端 id 冲突。如果您在后端或字符串 `New-${index}`.
或者，因为您无法提前知道后端 id，所以我没有看到其他解决方案，然后使用 uuid 生成器为该项目临时生成 id。这样的 id 实际上是无冲突的。
使用索引非常危险，因为其他项目之一可能已经在使用该 ID。