Question

React newbie alert !!

我收到此错误： 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);

如何摆脱这种反应的独特关键＆＃34;错误

1 个答案: