在組件上設置了關鍵道具

你好，我正在嘗試設置一個反應組件上的關鍵道具，但我不知道爲什麼我收到以下錯誤在組件上設置了關鍵道具

「警告：每個孩子在一個數組或迭代器應該有一個獨特的「關鍵」道具」

這是我的關鍵設置爲元素

var lists = this.props.lists.map(listName => { 
     return (
     <List key={listName.id} title={listName} cards={['Card1']} onAddClick={console.log('Clicked')}/> 
    ) 
    })

我真的不知道有什麼方法可以在這裏發生的事情，任何想法的代碼？

預先感謝您！

來源

2016-07-12 LuisPinto

您是否100％確定該列表不包含具有相同'.id'的兩個項目？ – ctrlplusb

什麼是'listName'？它是一個對象嗎？它似乎是一個字符串'title = {listName}' –

列表是我通過像列表= {['List1'，'List2']}通過的支柱 – LuisPinto

listName是一個字符串。它沒有id屬性。全部listName.id結果相同的值undefined

如果它們是唯一的，則可以使用listName作爲鍵。

var lists = this.props.lists.map(listName => { 
     return (
     <List key={listName} title={listName} cards={['Card1']} onAddClick={console.log('Clicked')}/> 
    ) 
    })

來源

2016-07-12 15:03:22

Ouch！多麼錯誤的男人！謝謝！ – LuisPinto

listName不是百分百保證作爲關鍵字工作。如果數據包含具有相同listName的多個項目，會發生什麼情況？應該像下面我的回答一樣使用索引。 – erichardson30

listName，因此不具有id值，你試圖將其設置爲一個鍵。由於listName也是一個字符串，因此不能保證它是100％唯一的。爲了解決此問題，請執行以下操作：

var lists = this.props.lists.map((listName, index) => { 
    return (
    <List key={index} title={listName} cards={['Card1']} onAddClick={console.log('Clicked')}/> 
) 
});

來源

2016-07-12 15:06:01 erichardson30

在組件上設置了關鍵道具

回答

相關問題