反应警告：flattenChildren（...）：遇到两个孩子用同一把钥匙 [英] React Warning: flattenChildren(...): Encountered two children with the same key

问题描述

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

Could someone please explain how to fix this error

警告：flattenChildren（...）：遇到两个孩子同样的
key

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

我在下面复制了我的代码，但由于某种原因，CodePen没有显示错误。

I have replicated my code below, but for some reason CodePen is not showing the error.

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

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

As a secondary question, I am pretty sure my reset is supposed to reset the values of the select boxes but this is also not working and just resetting the rendered results - not sure if this is related to the first problem?

任何帮助非常感谢

推荐答案

将索引添加为固定的值。感谢@azium为你的sugegstion。

Adding the index as value fixed this. Thanks @azium for your 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>

这篇关于反应警告：flattenChildren（...）：遇到两个孩子用同一把钥匙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！