2017-10-13 36 views
1

我正在使用索引在列表中生成鍵。但是,es-lint會爲此生成一個錯誤。 React doc也聲明使用item index作爲key應該作爲最後的手段。我想用react-key-indexnpm install react-key-index給出了以下錯誤:錯誤:不要在鍵中使用數組索引

npm ERR! code E404

npm ERR! 404 Not Found: [email protected]

是否有其他包,允許生成唯一的密鑰有什麼建議?任何關於反應密鑰生成器的建議是讚賞!

+1

你的對象在'children'中看起來像什麼?他們是否有ID或任何可以散列的數據來生成唯一的ID? – Nick

+0

如果一個列表從不重新排序(包括「插入」或「刪除」等操作),那麼索引是完全正確的。還有其他用例,例如下一頁可以實際包含相同的項目(具有相同的ID)。在這種情況下,使用索引優於使用標識符。實際上,在大多數情況下,索引是完全正確的,因爲部分更新不會發生在每個組件中。 – Sulthan

+0

在這種情況下,列表將重新排序 –

回答

1

當您使用數組的索引作爲關鍵字時,React將優化並且不按預期呈現。舉個例子,可以解釋在這種情況下會發生什麼。

假設父組件獲取10個項目的數組並基於該數組呈現10個組件。假設第五項從數組中移除。在下一個渲染中,父項將收到9個項目的數組,因此React將渲染9個組件。這將顯示爲第10個組件被刪除,而不是第5個組件,因爲React無法區分基於索引的項目。

因此,始終使用唯一標識符作爲從項目數組呈現的組件的鍵。

您可以使用任何唯一的子對象字段作爲關鍵字來生成您自己的唯一關鍵字。正常情況下,可以使用子對象的任何id字段。

編輯:如果組件創建並管理自己的狀態,您將只能看到上述行爲,例如,在不受控制的文本框,定時器等中。 React error when removing input component

+1

我沒有關注這個例子 - 你能提供一個可以重現這個問題的例子嗎?我經常使用數組,並從未遇到過這種類型的問題。 – lux

+0

@lux也許我無法正確解釋。希望這個鏈接將有所幫助。 https://stackoverflow.com/questions/46477711/react-error-when-removing-input-component – palsrealm