如何摆脱这个反应的“唯一键”错误

Question

反应新手提醒！

我得到这个错误： Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `resultTable`. See https://fb.me/react-warning-keys for more information. 作为https://fb.me/react-warning-keys建议，我已经加入键父元素，但我可以忽视的东西。请建议我在做什么错

 var ResultTable = React.createClass({ 
      displayName: 'resultTable', 
      propTypes: { 
       table: React.PropTypes.object.isRequired 
      }, 
      getDefaultProps: function() { 
       return { 
        table: { 
         rows: [], 
         cols: [], 
        } 
       }; 
      }, 
      getInitialState: function() { 
       return { 
        table: { 
         rows: this.props.table.rows, 
         cols: this.props.table.cols, 
        } 
       }; 
      }, 
      handleChange: function(event) { 
       console.log('data changed'); 
       this.setState({ 
        table: event.target.value 
       }); 
      }, 
      getValue: function(bug, property) { 
       //console.log('property', property); 
       try { 
        property = property.split('.'); 
        if (property.length === 3) { 
         return bug[property[0]][property[1]][property[2]]; 
        } 
        if (property.length === 2) { 
         if (property[1] === 'tickets') { 
          return bug[property[0]][property[1]].join(','); 
         } else { 
          return bug[property[0]][property[1]]; 
         } 
        } 
        if (property.length === 1) { 
         if (/(updatedAt|createdAt|fixedAt|shippedAt|closedAt)/.test(property)) { 
          // return $filter('date')(bug[property[0]], 'shortDate'); 
         } else if (property[0] === 'clones') { 
          return bug.clones.join(', '); 
         } else { 
          return bug[property[0]]; 
         } 

        } 
       } catch (e) { 
        return ''; 
       } 
      }, 
      order: function(event) { 
       // event.preventDefault(); 
       var hash = event.target.attributes.value.value + '_'; 
       if (event.target.attributes['data-reverse'].value === 'true') { 
        hash += 'desc'; 
        angular.element('a#' + event.currentTarget.attributes.id.value).attr('data-reverse', 'false'); 
       } else { 
        hash += 'asc'; 
        angular.element('a#' + event.currentTarget.attributes.id.value).attr('data-reverse', 'true'); 
       } 
       window.location.hash = hash; 
       //this.setState({table: {rows: this.props.table.rows, cols:this.props.table.cols}}); 
      }, 
      render: function() { 

       var that = this; 
       var columns = this.props.table.cols; 
       var rows = this.props.table.rows; 
       //console.log(this.props.table.cols); 
       var selectedColumns = _.filter(columns, 'selected', true); 

       var cols = selectedColumns.map(function(col, i) { 
        return React.DOM.th({ 
         key: 'col-' + i, 
         className: col.cssClass, 
        }, React.DOM.a({ 
         key: 'a-' + i, 
         id: 'a-' + i, 
         href: '#', 
         value: col.value, 
         'data-reverse': 'false', 
         onClick: that.order 
        }, col.name)); 
       }); 
       var header = React.DOM.thead(null, React.DOM.tr({ 
        key: 'header' 
       }, cols)); 

       var body = React.DOM.tbody(null, rows.map(function(bug, i) { 
        return React.DOM.tr({ 
          key: bug.id 
         }, 
         selectedColumns.map(function(column, j) { 
          return React.DOM.td({ 
           key: j 
          }, that.getValue(bug, column.value)); 
         })); 

       })); 

       return React.DOM.table({ 
        key: 'table-body', 
        className: 'table table-striped table-condensed pull-left resultTable' 
       }, [header, body]); 
      } 
     }); 

Answer 1

我的猜测是，问题是最后一行：

return React.DOM.table({ 
    key: 'table-body', 
    className: 'table table-striped table-condensed pull-left resultTable' 
}, [header, body]); 

你传递数组[header, body]作为孩子，在数组中的项目需要有钥匙;然而，header和body都没有关键属性。

但是，您不应该添加键来解决此问题;相反，只需将这两个元素作为单个参数传递而不是数组：

return React.DOM.table({ 
    key: 'table-body', 
    className: 'table table-striped table-condensed pull-left resultTable' 
}, header, body);