Question

我是新来的反应者和救赎者，我正在寻找帮助。我在该页面上有一个下拉菜单，其中有大约30种不同的选项可供选择，我需要根据选择从数据库返回数据。我正在努力弄清楚如何做到这一点。我尝试将this.props.selectedTeam添加到参数中，因为这是在另一个位置基于选择内容更新页面标题的方法，但是一旦做出新选择，它似乎就不会发出新请求。

    import React, {Component} from 'react';
    import {DropdownButton, MenuItem, Button} from 'react-bootstrap';
    import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
    import { connect } from 'react-redux';
    import PropTypes from 'prop-types';
    import Axios from 'axios';


export class Admin extends Component {
    constructor(props, context){
        super(props, context);

        this.state = {
            tools: [],
            showButton: false
        };
    }

    componentDidMount() {
        Axios.get('http://localhost:2309/admin/{TeamName}', {
            params: {
                TeamName: this.props.selectedTeam
            }
        })
        .then(res => {
            const tools = res.data.reportList;
            this.setState({tools}, console.log(tools));
        })
    }   

    operation(){
        this.setState({
            showButton: !this.state.showButton
        })
    }

    render(){
        return(
            <div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <h1 className="page-header"> Admin: {this.props.selectedTeam} 
                            <div className="pull-right btn-toolbar">

                            {
                                this.state.showButton?
                                <DropdownButton className='btn' title="Test Title" bsSize='large' bsStyle='primary'>
                                    <MenuItem>Test Tool 1</MenuItem>
                                    <MenuItem>Test Tool 2</MenuItem>
                                    <MenuItem>Test Tool 3</MenuItem>
                                    <MenuItem>Test Tool 4</MenuItem>
                                </DropdownButton>
                                :null
                            }

                            <Button onClick={()=>this.operation()} bsStyle="danger" bsSize="large"> Select If Admin </Button> 
                            </div>
                        </h1>
                    </div>
                </div>
                <div className="col-xs-5 col-xs-offset-1" style={{width: "90%"}}>
                    <BootstrapTable striped hover data = {this.state.tools}>
                        <TableHeaderColumn isKey dataField="teamName" width= "20%">
                            Team Name
                        </TableHeaderColumn>
                        <TableHeaderColumn dataField="toolType" width= "20%">
                            Tool Type
                        </TableHeaderColumn>
                        <TableHeaderColumn dataField="teamToolName" width= "20%">
                            Tool Name
                        </TableHeaderColumn>
                        <TableHeaderColumn dataField="projectTeamName" width= "20%">
                            Project 
                        </TableHeaderColumn>
                    </BootstrapTable>
                </div>
            </div>
        );
    }
}

Admin.PropTypes = {
    selectedTeam: PropTypes.string
};

function mapStateToProps(state) {
    return {
        selectedTeam: state.team.name
    }
}

export default connect(
    mapStateToProps
    )(Admin);

新选择后更新表

0 个答案: