Генерировать таблицу динамически отображаемую ошибку Неисправность Ошибка: Инвариантное нарушение

Question

Я создаю таблицу, в которой используются данные из json, jones «политики» меняются, когда я нажимаю на разные ссылки на странице, дело в том, что когда я нажимаю и изменение состояния, я должен генерировать таблицу снова с JSON, но я получаю

Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 1 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form> , <p> , or <a> , or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with 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>; 
     }); 
    }