反应警告:flattenChildren(...):遇到两个孩子用同一把钥匙

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

警告:flattenChildren(...):遇到两个孩子用同一把钥匙

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

var FilterOptions = React.createClass({
changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
},

render: function() {

return (
  

    

      
      Product
      {this.props.productOptions.map(function(option) {
        return ({option})
      })}
      
  
  
 );
 }
 });

Codepen

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

任何帮助非常感谢

使用索引作为关键不是一个好主意.关键是React用于识别DOM元素的唯一方法.如果您将项目推送到列表或删除中间的某些内容会发生什么？如果密钥与之前相同,则React假定DOM元素表示与以前相同的组件.但那不再是真的.来自:https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

最好使用您映射的每个项目中的唯一字符串作为键.类似于或者如果某个键不存在,可以通过执行类似的操作来创建唯一标识符.

添加索引作为固定的值.感谢@azium为你的sugegstion.

  
      Product
      {this.props.productOptions.map(function(option, value) {
        return ({option})
      })}