阵营儿童组件更新问题

Question

以下是我的代码

class Court extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      clubs: [], 
      clubId: 0 
     }; 

     this.onClubChange = this.onClubChange.bind(this); 
    }; 

    componentDidMount() { 
     if(this.props.auth.user.type == 'admin'){ 
      this.props.fetchClubs().then(
       (res) => this.setState({ 
        clubs: this.props.clubs 
       }) 
      ); 
     } 
     else { 
      this.props.fetchClubs(this.props.auth.user.id).then(
       (res) => this.setState({ 
        clubs: this.props.clubs 
       }) 
      ); 
     } 
    } 

    onClubChange(e){ 
     this.setState({ clubId: e.target.value}); 
    } 

    render() { 
     const { clubs, clubId } = this.state; 
     var clubsOptions = clubs.map(function(club){ 
      return (
       <option key={club.id} value={club.id}>{club.clubName}</option> 
      ); 
     }); 

     return (
      <div> 
       <form> 
        <div className={classnames('form-group')}> 
         <label className="control-label">Clubs</label> 
         <select 
          name = "clubId" 
          onChange={this.onClubChange} 
          className='form-control' 
          value={ clubId }> 
          <option value="0">Select Club...</option> 
          { clubsOptions } 
         </select> 
        </div> 
       </form> 
       { this.state.clubId != 0 ? <Courts clubId={this.state.clubId} /> : null } 
      </div> 
     ); 

    } 
} 

Court.propTypes = { 
    auth: React.PropTypes.object.isRequired, 
    clubs: React.PropTypes.array.isRequired, 
    fetchClubs: React.PropTypes.func.isRequired 
} 

function mapStateToProps(state) { 
    return { 
     clubs: state.clubs.clubs, 
     auth: state.auth 
    } 
} 
export default connect(mapStateToProps, { fetchClubs })(Court); 

当我改变下拉值时，会出现一个状态变化，但数据未在子组件法院更新

{ this.state.clubId != 0 ? <Courts clubId={this.state.clubId} /> : null } 

其次，第一次从下拉菜单中选择显示完美的数据，但在此之后没有变化显示

我在做什么错了？

Answer 1

试试吧，

class Court extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      clubs: [], 
 
      clubId: 0 
 
     }; 
 

 
     this.onClubChange = this.onClubChange.bind(this); 
 
    }; 
 

 
    componentDidMount() { 
 
     if(this.props.auth.user.type == 'admin'){ 
 
      this.props.fetchClubs().then(
 
       (res) => this.setState({ 
 
        clubs: this.props.clubs 
 
       }) 
 
      ); 
 
     } 
 
     else { 
 
      this.props.fetchClubs(this.props.auth.user.id).then(
 
       (res) => this.setState({ 
 
        clubs: this.props.clubs 
 
       }) 
 
      ); 
 
     } 
 
    } 
 

 
    onClubChange(e){ 
 
     this.setState({ clubId: e.target.value}); 
 
    } 
 

 
    render() { 
 
     const { clubs, clubId } = this.state; 
 
     var clubsOptions = clubs.map(function(club){ 
 
      return (
 
       <option key={club.id} value={club.id}>{club.clubName}</option> 
 
      ); 
 
     }); 
 
     
 
     let courts = <Courts clubId={this.state.clubId} />; 
 
     let courtsView = this.state.clubId != 0 ? courts : null; 
 

 
     return (
 
      <div> 
 
       <form> 
 
        <div className={classnames('form-group')}> 
 
         <label className="control-label">Clubs</label> 
 
         <select 
 
          name = "clubId" 
 
          onChange={this.onClubChange} 
 
          className='form-control' 
 
          value={ clubId }> 
 
          <option value="0">Select Club...</option> 
 
          { clubsOptions } 
 
         </select> 
 
        </div> 
 
       </form> 
 
       { courtsView } 
 
      </div> 
 
     ); 
 

 
    } 
 
} 
 

 
Court.propTypes = { 
 
    auth: React.PropTypes.object.isRequired, 
 
    clubs: React.PropTypes.array.isRequired, 
 
    fetchClubs: React.PropTypes.func.isRequired 
 
} 
 

 
function mapStateToProps(state) { 
 
    return { 
 
     clubs: state.clubs.clubs, 
 
     auth: state.auth 
 
    } 
 
} 
 
export default connect(mapStateToProps, { fetchClubs })(Court);