Javascript 如何摆脱这种反应'；s"；“唯一键”；错误

反应新手警惕

我得到了这个错误：

警告：数组或迭代器中的每个子级都应具有唯一的“键”属性。检查“resultable”的呈现方法。看见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]);
            }
        });

---

我猜问题出在最后一行：

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);

---

我猜问题出在最后一行：

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);

---

检查bug.id是否存在。如果bug.id未定义，则可能导致此警告。是，它具有ex:。我甚至用“我”替换了bug.id，但没有区别。检查bug.id是否存在。如果bug.id未定义，则可能导致此警告。是，它具有ex:。我甚至把bug.id换成了“我”通过了我的地图，但没什么区别。非常感谢先生！非常感谢，先生！