React Warning: 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

В качестве второстепенного вопроса, я уверен, что мой reset должен reset значениях полей выбора, но это также не работает и просто выполняет сброс полученных результатов - не уверен, связано ли это с первым проблема?

Любая помощь очень ценится

Ответ 1

Добавление индекса как значения зафиксировало это. Спасибо @azium за ваше согласие.

  <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>

Ответ 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}>.

Ответ 3

Я большой поклонник использования ключа, комбинируя индекс с некоторым постоянным значением, а не используя key={value.name + value.description}:

key={'some-constant-value'+index}

Это потому, что я могу передать ключ заведомо, для чего он предназначен. Напр. <ComponentA key={'compoent-a-'+i}/>. Кроме того, я следую этому подходу, потому что простое соглашение html совпадает, как мы указываем id="my-some-of-the-id" или что-то еще.

Таким образом, даже если вы хотите использовать имя и описание в качестве ключа, вы можете использовать это скорее:

key={'some-constant-'+value.name+'-'+value.description}

Это всего лишь мнение. Хотя, я следую html конвенции при написании значения реквизита.