setState (...) aufgerufen auf einer nicht eingebundenen Komponente

Question

Ich habe vor kurzem mit ReactJs begonnen und versuche, eine Tabelle dynamisch aufzufüllen. Mein Code ist wie folgt:

export default class StatsTable extends React.Component { 
    constructor(){ 
     super(); 
     this.state={ 
      tableData : [], 
     } 
    } 

populateTable(){ 
    var tableDataList = []; 
    data = this.state.tableData; 
    data.map(function (row){ 
     tableDataList.push(
      <tr key={row.id}> 
      <td>{row.id}</td> 
     </tr>) 
    }); 
    return tableDataList; 
} 

handleActions(action){ 
    switch(action.type){ 
     case "TABLE_DATA_RECEIVED" : 
      var tableInput = action.data.data; 
      this.setState({tableData : tableInput}); 
      break; 
    } 
} 

loadStatsTable() { 
    loadTable(); //Triggers an ajax query that emits the message and data received 
} 

render(){ 
    return(<div> 
      <Button onClick={this.loadStatsTable.bind(this)}>Load</Button> 
      <Table> 
       <thead>{this.populateTable()}</tbody> 
      </Table> 
      </div>); 
    } 
} 

ich aber eine Warnmeldung: Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the StatsTable component.

Als ich die Anfrage ausgelöst. Warum bekomme ich den Fehler? Da die Komponente bereits geladen ist (Seite hat komplett geladen), wenn ich auf den Button klicke? Was ist das Problem?

Hinweis: Die populateTable() Funktion funktioniert einwandfrei, wenn ich versuche, es mit einer statischen Liste zu füllen. Der Fehler tritt auf, wenn ich this.setState({tableData : tableInput});

Answer 1

Wo auch immer Sie handleActions als Callback registrieren, müssen Sie es in componentWillUnmount Lebenszyklus Haken rückgängig zu machen.

componentWillUnmount() { 
     //Unregister handleActions from dispatcher 
} 

Answer 2

benutze. Versuchen Sie, this.state.tableData aus Ihrem Render in populate Tabelle zu übergeben.

<Table> <thead>{this.populateTable(this.state.tableData)}</tbody> </Table>