React native：map（）生成コンポーネントから各onpress（）を個別に制御する方法

Question

ネイティブに反応するのは初めてです。 配列の要素の数に応じて、3回のドロップダウンを連続してレンダリングしています。 配列に3つの要素がある場合、3行の3つのドロップダウンがあります。 しかし、単一のドロップダウンからonpressを呼び出すと、3行すべての対応する要素に影響します。 どうすれば個々の行を個別に制御できますか？ ソリューションの多くは、バインドを使用すると言うが、私が試した方法は何に影響を与えませんでした。 click to see the rendered layout looks for 3 elements in the arrray

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:'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})}}/> 
         {(this.state.editstatus) 
          ?<Text>Edit</Text> 
          :<Text></Text> 
         } 
         </View> 
        }</View>)       
     }) 
    ); 
    } 

Answer 1

あなたは、あなたが個別にそれぞれの行を制御することができるようになりますにonSelect方法に固有のキーを渡す必要があります。以下の例では、2つの配列があり、内部配列のデータを取得するために、外部配列のインデックスと内部配列のインデックスを渡す必要があります。これはまたそれをユニークにするでしょう。

var arr1 = [1,2,3] 
var arr2 = ['a','b','c'] 


function looper(data1,data2){ 
    data1.map((item1,index1) => { 
    data2.map((item2,index2) =>console.log("item1: " + item1 + " " + index1 + " item2: " + item2 + " " + index2)); 
    }) 
} 
looper(arr2,arr1);