React：獨特的鍵和樂觀的更新

Question

在我的React應用程序中，我使用數據庫ID作為鍵來渲染從服務器返回的項目數組。

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

這工作正常，但現在我想進行樂觀更新，所以我在將新項目提交到服務器之前將新項目插入到數組中，然后在完成后期操作時添加數據庫ID。 現在我的數組簡要地包含由於缺少鍵而沒有id導致錯誤的項目。

該怎么辦？ 我知道使用索引作為鍵被認為是反模式（ https://www.menubar.io/react-keys-index/ ），所以這是不可能的。 我也不想為這些項目生成新的唯一ID，因為一旦將它們保存到數據庫中，它們都將具有兩個唯一的ID。 我考慮過使用隨機密鑰來保存未保存的對象，但這似乎是一個不穩定的解決方案。

這種情況是否有最佳實踐解決方案？ 我不能成為第一個遇到這個問題的人。

Answer 1

由於數據庫中正在更新的項目的id很可能在成功發布請求時發生更改，因此您可以使用index作為這些特定項目的鍵

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

使用上述方法的一個可能的缺點是當你的item.id之一與index一致時，因此根據您的用例，您可以選擇僅對數據庫中尚未更新的項目使用index或randomId 。

PS確保您沒有在render方法中生成randomId ，因為它會導致性能問題導致組件在每次重新渲染時重新安裝

Answer 2

如果您只是附加到列表，則可以使用從數組索引派生的id，並保證永遠不會與后端ID沖突。 如果您在后端增加主鍵或字符串`New-${index}`那么索引就像負值一樣。

或者，因為您無法提前知道后端id ，所以我沒有看到其他解決方案，然后使用uuid生成器臨時生成該項目的id 。 這樣的id幾乎沒有碰撞。

使用索引非常危險，因為其他項目之一已經可以使用該ID。