反应警告:flattenChildren(...):遇到两个具有相同密钥的孩子 [英] React Warning: flattenChildren(...): Encountered two children with the same key

问题描述

谁能解释一下如何解决这个错误

<块引用>

警告:flattenChildren(...):遇到两个孩子键

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

var FilterOptions = React.createClass({更改选项:函数(类型，e){var val = e.target.value;this.props.changeOption(val, type);},渲染:函数(){返回 (<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>)})}</选择>

);}});

代码笔

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

非常感谢任何帮助

解决方案

添加索引作为值修复了这个问题.感谢@azium 的建议.

 
Could someone please explain how to fix this error 

  
Warning: flattenChildren(...): Encountered two children with the same
  key
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?

Any help much appreciated
解决方案
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屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆