javascript - React警告: flattenChildren(. ..):遇到两个拥有相同 key 的 child

Question

有人可以解释一下如何修复此错误

Warning: flattenChildren(...): Encountered two children with the same key

我已经复制了下面的代码，但由于某种原因 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

使用索引作为键并不是一个好主意。键是 React 用来识别 DOM 元素的唯一东西。如果将某个项目插入列表或删除中间的某些内容会发生什么？如果 key 与之前相同，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}> 的操作来创建唯一标识符.