Generieren Tabelle dynamisch Anzeige Fehler Uncaught Fehler: Invariant Violation

Question

Ich erstelle eine Tabelle, die Daten aus einem JSON verwendet, die JSON "Richtlinien" ändern, wenn ich auf verschiedene Links auf der Seite klicke, die Sache ist, dass wenn ich klicke und die Zustandsänderung, muss ich wieder mit dem neuen json die Tabelle generieren, aber ich erhalte eine

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 .

das erste Mal, wenn die Seite der Tabelle lädt korrekt erzeugt.

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

Ich bewege nur die von der für die Funktion machen, die die Zeilen erzeugt:

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