Recientemente comencé a usar ReactJs y estoy tratando de completar dinámicamente una tabla. Mi código es el siguiente:

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

Sin embargo, recibo un mensaje de advertencia: 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.

Cuando disparo la solicitud. ¿Por qué recibo el error? Dado que el componente ya se ha montado (la página se ha cargado por completo), ¿cuando hago clic en el botón? ¿Cuál es la solución?

Nota: la función populateTable() funciona bien cuando trato de completarla usando una lista estática. El error ocurre cuando uso this.setState({tableData : tableInput});

0
Nihal Harish 15 dic. 2016 a las 14:40

2 respuestas

La mejor respuesta

Donde sea que esté registrando handleActions como devolución de llamada, debe deshacerlo en el enlace del ciclo de vida de componentWillUnmount.

componentWillUnmount() {
      //Unregister handleActions from dispatcher
}
2
rahul 15 dic. 2016 a las 16:16

Intente pasar this.state.tableData a la tabla rellenar desde dentro de su render.

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

0
Christopher 15 dic. 2016 a las 13:14