React Warning: flattenChildren (...): spotykane dwoje dzieci z tym samym kluczem

Question

Może ktoś proszę wyjaśnić, jak naprawić ten błąd

Warning: flattenChildren (...): spotykane dwoje dzieci z tego samego klucz

Replikowałem mój kod poniżej, ale z jakiegoś powodu CodePen nie pokazuje błędu.

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

jako pytanie wtórnym, jestem całkiem pewny, że moja resetu ma przywrócić Wartości wybranych pól, ale to też nie działa i po prostu resetowania świadczonych rezultaty - nie wiem, czy to jest związany z pierwszym problemem?

Każda pomoc bardzo doceniana

Answer 1

Dodanie indeksu jako wartości to rozwiązało. Dzięki @ Azium za sugestię.

<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

Nie jest dobrym pomysłem użycie indeksu jako klucza. Klucz jest jedyną rzeczą używaną przez React do identyfikacji elementów DOM. Co się stanie, jeśli naciśniesz element na listę lub usuniesz coś w środku? Jeśli klucz jest taki sam jak wcześniej, React zakłada, że ​​element DOM reprezentuje ten sam komponent co poprzednio. Ale to już nie jest prawda. Od: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Znacznie lepiej użyć unikatowego ciągu z każdego elementu, który mapujesz jako klucz. Coś takiego jak <option key={value.id}> lub jeśli klucz nie istnieje, stwórz unikalny identyfikator, wykonując coś takiego jak <option key={value.name + value.description}>.