陣營兒童組件更新問題

以下是我的代碼陣營兒童組件更新問題

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 }

其次，第一次從下拉菜單中選擇顯示完美的數據，但在此之後沒有變化顯示

我在做什麼錯了？

來源

2017-02-17 Adeel Arshad

試試吧，

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

來源

2017-02-17 20:20:52

感謝您的答覆。但它不是更新 –

我做了一個編輯。嘗試新的一點。 –

我解釋了整個場景。可能您會得到這個問題目前，我在下拉選擇 FCB MCF 3個選項當我選擇FCB它的展示與FCB的數據，然後我選擇MCF沒有變化發生，那麼我選擇「選擇'所以組件消失，然後選擇MCF，現在數據顯示相應希望你得到問題感謝你的預期 –

陣營兒童組件更新問題

回答

相關問題