陣營警告：flattenChildren（...）：遇到兩個孩子使用相同的密鑰

可能有人請解釋一下如何解決這個錯誤陣營警告：flattenChildren（...）：遇到兩個孩子使用相同的密鑰

警告：flattenChildren（...）：遇到兩個孩子一樣密鑰

我已經複製了下面的代碼，但由於某種原因CodePen沒有顯示錯誤。

var FilterOptions = React.createClass({ 
changeOption: function(type, e) { 
var val = e.target.value; 
this.props.changeOption(val, type); 
}, 

render: function() { 

return (
    <div className="filter-options"> 
    <div className="filter-option"> 
     <select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}> 
     <option value=''>Product</option> 
     {this.props.productOptions.map(function(option) { 
     return (<option key={option} value={option}>{option}</option>) 
     })} 
     </select> 
    </div> 
    </div> 
); 
} 
});

Codepen

作爲第二個問題，我敢肯定我的復位應該重置的選擇框的值，但是這也沒有工作，只是重新渲染的結果 - 不知道這與第一個問題有關？

非常感謝任何幫助

來源

2017-01-17 Chris O

您確定'this.props.productOptions'具有唯一值嗎？如果是這樣，那麼你確定這段代碼是給出了錯誤，而不是別的地方？ –

@MartinMazzaDawson不，在所有選擇菜單中都有一些重複值 - 確切的錯誤都是這樣的 - bundle.js：9899警告：flattenChildren（...）：遇到兩個具有相同鍵的孩子，'1：$ prod3 '。子鑰匙必須是唯一的;當兩個孩子分享一把鑰匙時，只有第一個孩子會被使用。 –

如果您將'key'更改爲索引值而不是'option'，錯誤會消失嗎？ – azium

添加索引作爲值固定此。謝謝@azium你的sugegstion。

<select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}> 
     <option value=''>Product</option> 
     {this.props.productOptions.map(function(option, value) { 
     return (<option key={value} value={option}>{option}</option>) 
     })} 
     </select>

來源

2017-01-17 17:46:14

它的作品，你救了我的一天！ –

謝謝你，你救了我的一天 –

將索引作爲關鍵字不是一個好主意。關鍵是React用來識別DOM元素的唯一東西。如果你將一個項目推入列表或刪除中間的東西會發生什麼？如果該鍵與之前的相同，則React假定DOM元素表示與以前相同的組件。但這不再是事實。 From：https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

使用您映射的每個項目中的唯一字符串作爲關鍵字要好得多。類似<option key={value.id}>或者如果某個密鑰不存在，請通過執行諸如<option key={value.name + value.description}>之類的操作來創建唯一標識符。

來源

2017-04-14 16:18:13

Arrg但是如果道具對象中沒有獨特的東西呢？在我的情況下，我有一個包含5個複選框的行。複選框是爲陣列中的每個條目生成的。但沒有什麼獨特的關於他們...... – Kokodoko

@Kokodoko最好是在這種情況下使用不可變的數據（或者至少不要試圖系統地改變你的複選框），並使用對象的散列作爲關鍵。這是您可以區分對象（如點，複選框等）並創建唯一鍵的唯一方法。 –

陣營警告：flattenChildren（...）：遇到兩個孩子使用相同的密鑰

回答

相關問題