が反応警告：flattenChildren（...）：と2人の子供があったのと同じ

Question

誰かがこのエラーを修正する方法を説明してもらえキー

警告：flattenChildren（...）：同じと2人の子供が発生しました キー

私は以下の私のコードを複製しているが、何らかの理由で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

、私は私のリセットが選択ボックスの値をリセットすることになっているが、これも動作していないし、ちょうどレンダリング結果をリセットしてかなり確信している - この場合はわかりません最初の問題に関連していますか？

任意のヘルプははるかにこれを固定値としてインデックスを追加

Answer 1

を理解します。あなたの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> 

Answer 2

インデックスをキーとして使用することはお勧めできません。 ReactがDOM要素を識別するために使用するのは、キーだけです。アイテムをリストにプッシュするか、途中で何かを削除するとどうなりますか？キーが以前と同じである場合Reactは、DOM要素が以前と同じコンポーネントを表すことを前提としています。しかしそれはもはや真実ではありません。送信元：https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

キーとしてマッピングする各アイテムの一意の文字列を使用する方がはるかに優れています。 <option key={value.id}>のようなもの、またはキーが存在しない場合は、<option key={value.name + value.description}>のようなものを実行して一意の識別子を作成します。