當我們使用 Array.prototype.map() 從可迭代對象中渲染 react 組件時，索引是如何生成的，react 是如何使用它的？

Question

我想知道，如果迭代 object 的內容對正在生成的索引有任何影響，例如，如果迭代對象具有相同的鍵值，它會生成相同的索引還是接受的鍵道具會受到影響？

例如我正在使用這個數組：

[
  {id: 1, bank: "HDFC", account:"345345"},
  {id: 1, bank: "Stabdard_Chartered", account:"678567"},
]

Answer 1

密鑰不是自動生成的，您需要添加自己的密鑰（參見示例），react 使用密鑰來跟蹤每次重新渲染時需要更新的元素。

{array.map((item) => {
    return <p key={item.id}>{item.name}</p>
}) 

您也可以使用map的index作為您的密鑰，盡管許多人反對它，該索引是傳遞給 map 的第二個（可選）參數，如下所示

{array.map((item, index) => {
    return <p key={index}>{item.name}</p>
}) 

Answer 2

如果只是想要一個簡單的鍵 map 的第二個參數是一個索引，您可以將其用作鍵

objects.map(objs,index) => { return <Obj key={index} /> }