生成表动态显示错误Uncaught error: Invariant Violation

Question

我正在创建一个使用json数据的表，当我点击页面中的不同链接时，json "策略"会发生变化，问题是，当我点击状态改变时，我必须再次生成新的json表，但我得到一个

Uncaught Error: Invariant Violation: processUpdates():无法找到元素的子元素1。这可能意味着DOM意外地发生了变化(例如，由浏览器)，通常是由于在使用表时忘记了<tbody>，嵌套标记如<form>, <p>或<a>，或在<svg>父元素中使用非svg元素。试着用React ID .0.1.0.2.3.1.1.2.0.1检查元素的子节点。

页面第一次加载表时正确生成。

module.exports = React.createClass({
onPoliciesChange: function (policiesStore) {
    this.setState(policiesStore);
},
getInitialState: function () {
    return {
        policies: []
    };
},
componentDidMount: function () {
    this.unsubscribeAlertsStore = AlertsStore.listen(this.onPoliciesChange);
},
componentWillUnmount: function () {
    this.unsubscribeAlertsStore();
},

cols: [
    { key: 'name', label: 'Name'},
    { key: 'severity', label: 'Severity' },
    { key: 'width', label: 'Width' },
    { key: 'pulsate', label: 'Pulsate' }        
],
generateHeaders: function () {
    var cols = this.cols;  // [{key, label}]
    // generate our header (th) cell components
    return cols.map(function (colData) {
        return <th key={colData.key}> {colData.label} </th>;
    });
},
generateRows: function () {
    var slf = this;
    var cols = this.cols,  // [{key, label}]
        data = this.data;
    //per each item 
    return this.state.policies.map(function (item) {
        // handle the column data within each row
        var cells = cols.map(function (colData) {
            return <td> {item[colData.key]} </td>;          
        });
        return <tr key={item.id}> {cells} </tr>;
    });
},
render: function () {
    var headerComponents = this.generateHeaders(),
        rowComponents = this.generateRows();
    return (
        <table className="table table-condensed table-striped">
            <thead> {headerComponents} </thead>
                <tbody> {rowComponents} </tbody>
            </table>
        );
    }
});

Answer 1

我只是把它从渲染移到创建行的函数:

generateRows: function () {
        var severity = this.renderSeverity();
        var slf = this;
        var cols = this.cols,  // [{key, label}]
            data = this.data;
        //per each item 
        return this.state.policies.map(function (item) {
            // handle the column data within each row
            var cells = cols.map(function (colData) {
                if (colData.key === 'width') {
                    //return <td> <input type="checkbox" name="vehicle" value="Bike" onChange={slf.onChange.bind(null, id) }/></td>;
                    return <td> <input type="checkbox"  onChange={slf.onChangeWidth.bind(null, item.id) }/></td>;
                } else if (colData.key === 'pulsate') {
                    return <td> <input type="checkbox"  onChange={slf.onChangePulsate.bind(null, item.id) }/></td>;
                } if (colData.key === 'policyCheck') {
                    return <td> <input type="checkbox"  onChange={slf.onChangePolicy.bind(null, item.id) }/></td>;
                } else if (colData.key === 'severity') {
                    // colData.key might be "firstName"
                    return <td>{item[colData.key]} {slf.renderSeverity(item.severity) }</td>;
                } else {
                    // colData.key might be "firstName"
                    return <td> {item[colData.key]} </td>;
                }
            });
            return <tbody><tr key={item.id}> {cells} </tr></tbody>;
        });
    }