React JS不呈现数据库中的数据

Question

我正在研究一种情况，我需要根据下拉列表中选择的表从API填充数据。例如：ProductMapping和ConfigMapping是2个表，当我选择ProductMapping时，我应该从该表中获取所有数据并在react中显示在ListView中。但是现在，当我选择ProductMapping时，我将获得ConfigMapping的数据，反之亦然。

 class TableData extends React.Component {


        productTable:any =[
            { title: "type", key: "type", width: 120},
            { title: "businessModel", key: "businessModel", width: 200},
            { title: "marketSegment", key: "marketSegment", width: 200},
            { title: "productCode", key: "productCode", width: 200}
        ];

        configTable:any = [
            {title: "type", key: "type", width: 120},
            {title: "specType", key: "specType", width: 120},
            {title: "businessModel", key: "businessModel", width: 120},
            {title: "marketSegment", key: "marketSegment", width: 120},
            {title: "commitment", key: "commitment", width: 120},
            {title: "term", key: "term", width: 120},
            {title: "config1", key: "config1", width: 120},
            {title: "configType", key: "configType", width: 120},
            {title: "dr", key: "dr", width: 120},
            {title: "additionalTextGroup", key: "additionalTextGroup", width: 120},
            {title: "ppiFlag", key: "ppiFlag", width: 120},
            {title: "webSellable", key: "webSellable", width: 120}
        ];

    constructor(props) {
            super(props);
            this._selectTable = this._selectTable.bind(this);
            this.state = {
                 selectedTable: null,
                 tableNameList: [],
                 tableData:[],
                 loading: true
            };
            this.dataSource = new MyDataSource();

        }


    componentDidMount() {
                         this.setState({ 
                     tableNameList:tableNames.tempTableList, 
                    loading: false});


_selectTable(selectedTable) {
            axios.get("/svc/tableData/" + selectedTable)
                .then((response) => {
                     console.log("get table data for",selectedTable);
                     console.log("And the response is",response);

                     if(response.data && response.data.length > 0) {

                         let fullTableData = response.data.map((row) => 
                         {
                            return row;
                        });
                        this.setState({selectedTable: selectedTable,tableData: fullTableData}); 
                     }
        })              
    }

    renderCell(column, row) {

        return <span title={row[column.key]}>{row[column.key]}</span>

}

renderEmptyView() {
    return <span>No Data</span>
}

renderColumnHeader(column) {
    console.log(column)
    return <span title={column.title}>{column.title}</span>
}

    renderTableData() {
        if (this.state.selectedTable === 'ProductMapping') { 
                 this.dataSource.updateData(this.state.tableData);
                    return (
                        <div className="test-table">
                            <label>Table Data</label><br/>
                            <TableView
                            columns={this.productTable}
                            dataSource={this.dataSource}
                            renderCell={this.renderCell}
                            renderEmptyView ={this.renderEmptyView}
                            renderColumnHeader={this.renderColumnHeader}
                            allowsSelection={false} 
                            />
                        </div>
                    )
                } else  if (this.state.selectedTable === 'ConfigMapping') { 
                     this.dataSource.updateData(this.state.tableData);
                     return (
                         <div className="test-table">
                             <label>Table Data</label><br/>
                             <TableView
                             columns={this.configTable}
                             dataSource={this.dataSource}
                             renderCell={this.renderCell}
                             renderEmptyView ={this.renderEmptyView}
                             renderColumnHeader={this.renderColumnHeader}
                             allowsSelection={false} 
                             />
                         </div>
                     )
                 }
        }


    renderTableNames() {
        if (this.state.tableNameList.length) {
            const tableNameOptions = this.state.tableNameList.map((tableName) => {
                return { label: tableName, value: tableName };
            });
            return (
                <div>
                    <label>Select Table Name</label><br />
                    <Select
                        onChange={this._selectTable}
                        options={[{ label: "", value: "", disabled: true }, ...tableNameOptions]}
                        value={this.state.selectedTable ? this.state.selectedTable : ""}
                    />
                </div>
            )
        }
    }

    render() {
        return (
                <div>
                {this.renderTableNames()}
                {this.renderTableData()}
            </div>
        )
    }
}


    export default TableData;