Question

我最近开始使用ReactJs并尝试动态填充表格。我的代码如下：

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

但是我收到了一条警告消息：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.

当我解雇请求时。为什么我会收到错误？因为，当我点击按钮时，组件已经安装（页面已完全加载）？有什么问题？

注意：当我尝试使用静态列表填充它时，populateTable()函数正常工作。使用this.setState({tableData : tableInput});

时发生错误

Answer 1

无论您将handleActions注册为回调，都需要在componentWillUnmount生命周期挂钩中撤消它。

componentWillUnmount() {
      //Unregister handleActions from dispatcher
}

Answer 2

尝试将this.state.tableData从渲染中传递到populate表中。

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

setState（...）在未安装的组件

2 个答案: