反应警告：flattenChildren（…）：遇到两个具有相同密钥的孩子

Question

有人可以解释如何解决此错误

警告：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>
 );
 }
 });

码笔

作为第二个问题，我很确定我的重置应该重置选择框的值，但是这也不起作用，只是重置渲染的结果-不知道这是否与第一个问题有关？

任何帮助非常感谢

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