0
反應新手提醒!如何擺脫這個反應的「唯一鍵」錯誤
我得到這個錯誤: 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]);
}
});
檢查是否存在bug.id。如果bug.id未定義,那麼它可能會導致此警告。 –
是的,例如:
回答
我的猜測是,問題是最後一行:
你傳遞數組
[header, body]
作爲孩子,在數組中的項目需要有鑰匙;然而,header
和body
都沒有關鍵屬性。但是,您不應該添加鍵來解決此問題;相反,只需將這兩個元素作爲單個參數傳遞而不是數組:
來源
2016-01-22 23:45:30
非常感謝你,先生! – Sudhakar
相關問題