React Native：別のドロップダウン値の選択に応じて、1つのドロップダウンのオプションを動的に設定しています。しかしthis.setlection

Question

私は反応ネイティブなので、this.setstateメソッドは私のために予測できません。

会場に応じてドロップダウン1のVenueのリストを選択しています。 、2番目のドロップダウンには、利用可能な日数をオプションとして表示する必要があります。私は第三のドロップダウン

第三ドロップダウンへの第二は、私 のために正常に動作しますが、私は最初のドロップダウンで会場を選択したときに第二1更新をしないで下盛のタイムスロットを設定する必要が二一項に記載の と同様。このセットスタットは遅れて動作しています

私が会場をもう一度選択すると、前回選択した日は現在のものをロードしません。 SETSTATEのような方法は、私は、コード、 私は訂正、コーディング、何 の新しい構造に開いていますが、非常に必要で、この作業を取得するために書いた方法を指定する必要があります

一歩後ろに遅れている

onVenueSelect(index,value){ 
    var props=this.props; 
    console.log('On venue Select................................') 
    console.log('index'+index) 
    console.log('value'+value) 
    console.log(this.state.venue_id_array[index]) 
    props.getFixtureSlots(this.state.venue_id_array[index], this.state.game_type, this.state.game); 
    this.setState({selected_venue_id:this.state.venue_id_array[index]}) 

    var days=[]; 
    var timeslots=props.GETFIXTURETIME.timeslot; 
    for(var i in timeslots){ 
     days.push(timeslots[i].day_of_week); 
    } 
    this.setDay_array(days); 
    this.refs.modal_dayselect.select(-1); 
    this.setState({selected_venue:value}); 
    } 

    onDaySelect(index,value){ 
    this.refs.modal_hrsselect.select(-1); 
    this.props.getFixtureSlots(this.state.selected_venue_id, this.state.game_type, this.state.game); 
    var props=this.props; 
    this.setState({selected_day_no:this.state.day_no_array[index]}) 
    console.log(this.state.day_no_array[index]) 
    this.setState({selected_day:value}) 

    } 

    render_center_selection(){ 

     return(
     this.props.selecteddays_array.map((a, i) => { 
      return(<View key={i} style={{ height:40, borderBottomWidth:2, borderBottomColor: '#ededed' }}>{ 
        <View style={{flexDirection:'column'}}> 
         <View style={{flexDirection:'row'}}> 
         <ModalDropdown 
          style={styles.selection} 
          defaultValue='Venue' 
          textStyle={{width:200,fontSize:20,textAlign:'center',color: '#7070D8'}} 
          dropdownStyle={styles.dropdownstyle} 
          dropdownTextStyle={{width:350,fontSize:20,textAlign:'center',backgroundColor: '#FDD60B',}} 
          options={this.state.venue_name_array} 
          onSelect={(index,value)=>{this.onVenueSelect(index,value)}}/> 
         <ModalDropdown 
          ref="modal_dayselect" 
          style={styles.dayselection} 
          defaultValue='Day' 
          textStyle={{width:50,fontSize:15,textAlign:'center',color: '#7070D8'}} 
          dropdownStyle={styles.daydropdownstyle} 
          dropdownTextStyle={{width:50,fontSize:15,textAlign:'center',backgroundColor: '#FDD60B',color: '#7070D8'}} 
          options={this.state.day_array} 
          onSelect={(index,value)=>{this.onDaySelect(index,value)}}/> 
         <ModalDropdown 
          ref="modal_hrsselect" 
          style={styles.dayselection} 
          defaultValue='HRS' 
          textStyle={{width:50,fontSize:15,textAlign:'center',color: '#7070D8'}} 
          dropdownStyle={styles.daydropdownstyle} 
          dropdownTextStyle={{width:50,fontSize:15,textAlign:'center',backgroundColor: '#FDD60B',color: '#7070D8'}} 
          options={this.state.hrs_array} 
          onSelect={(index,value)=>{this.setState({selected_hr:value})}}/> 
         </View> 

        </View> 
        }</View>);       
     }) 
    ); 
    } 

Answer 1

まず、コードからconsole.log文をすべて削除するだけです。本当に便利ですが、アプリのレンダリング/リフレッシュレートが遅くなります。

第2のことと最も重要なことは、状態設定呼び出しを統合することです。つまり、1つのアクション内に1つのsetStateコールが必要です。 setStateが呼び出されるたびに、アプリケーションはその変更された状態を使用する部品を再レンダリングします。したがって、一度に複数の状態を更新しなければ、反応によって検出されません。