Используйте ключ или ref in React-Native

Question

Итак, у меня возникла проблема с использованием цикла в реакции-native, в основном связанного с тем, как обновить объявление по умолчанию, получить каждое значение ввода текста, если я зациклирую много текстовых вводов. Я думаю, что решение заключается в использовании ключа, но я не уверен, как его реализовать в коде. Или, может быть, мы сможем использовать ref?

Итак, детали проблемы таковы: noGuest в цикле вводится пользователем с максимальным количеством 4 гостей. Основываясь на выпадающем значении внутри каждого цикла, я хочу напрямую обновить все поле в текущем индексе с существующими данными, установив состояние. Но поскольку я не знаю, как использовать ключ, когда я выбираю параметр в раскрывающемся списке Guest 1, все поля (включая Guest 2, Guest 3, Guest 4) фактически обновляются существующими данными. Получение значения каждого ввода текста может быть довольно простым, если мне удастся решить предыдущую проблему.

constructor(props) { 
    super(props); 
    this.state = { 
     guestInfo: '', 
     first_name: '', 
     last_name: '', 
    }; 
} 
onGuestNameChange(guestName) { 
    console.log('executing onGuestNameChange'); 
    let guest = guestName.value; 
    var len = guest_profile.length; 
    for (let i = 0; i < len; i++) { 
     let row = guest_profile[i]; 
     console.log(row.first_name); 
     if(row.first_name == guest) { 
      this.setState({ 
       first_name : row.first_name, 
       last_name : row.last_name, 
      }); 
     } 
    } 
    var guestInfo = this.generateguestInfoField(); 
    this.setState({guestInfo : guestInfo}); 
} 
generateguestInfoField() { 
    var noGuest = this.state.guest; 
    var guestInfo = []; 
    for(let i = 1; i < noGuest; i++){ 
     guestInfo.push(
      <View style={styles.guestFormField} key = {i}> 
       <View style={styles.guestTitle}> 
        <Text style={{fontSize: 16, color:'black'}}>Guest {i}</Text> 
        <Dropdown style={{ height: 20, width: 150}} 
        values={guest_name} selected={0} 
        onChange={this.onGuestNameChange.bind(this)} /> 
       </View> 
       <View style={styles.guestInput}> 
        <Text style={styles.guestLabel}>First Name</Text> 
        <View style={styles.guestFieldBox}> 
         <TextInput 
          style={styles.guestField} 
          underlineColorAndroid={'white'} 
          defaultValue={this.state.first_name} 
         /> 
        </View> 
       </View> 
       <View style={styles.guestInput}> 
        <Text style={styles.guestLabel}>Last Name</Text> 
        <View style={styles.guestFieldBox}> 
         <TextInput 
          style={styles.guestField} 
          underlineColorAndroid={'white'} 
          defaultValue={this.state.last_name} 
         /> 
        </View> 
       </View> 
      </View> 
     ) 
    } 
    return guestInfo; 
} 

Любое предложение в изобилии оценено. Благодарю.

Answer 1

Я не весь код для вашего компонента, а от того, что я могу сказать, что-то, как это должно решить проблему:

constructor(props) { 
    super(props); 
    this.state = { 
     guestInfo: '', 
     guests: [] 
    }; 
} 
onGuestNameChange(guestName, i) { 
    console.log('executing onGuestNameChange'); 
    let guest = guestName.value; 
    let guests = [] 
    var len = guest_profile.length; 
    for (let i = 0; i < len; i++) { 
     let row = guest_profile[i]; 
     console.log(row.first_name); 
     if(row.first_name == guest) { 
      guests.push(row) 
     } 
    } 
    this.setState({ 
     guestInfo : guestInfo, 
     guests: guests 
    }) 
    var guestInfo = this.generateguestInfoField(); 

} 

generateguestInfoField() { 
    var noGuest = this.state.guest; 
    var guestInfo = []; 
    for(let i = 1; i < noGuest; i++){ 
     guestInfo.push(
      <View style={styles.guestFormField} key = {i}> 
       <View style={styles.guestTitle}> 
        <Text style={{fontSize: 16, color:'black'}}>Guest {i}</Text> 
        <Dropdown style={{ height: 20, width: 150}} 
        values={guest_name} selected={0} 
        onChange={this.onGuestNameChange.bind(this, i)} /> 
       </View> 
       <View style={styles.guestInput}> 
        <Text style={styles.guestLabel}>First Name</Text> 
        <View style={styles.guestFieldBox}> 
         <TextInput 
          style={styles.guestField} 
          underlineColorAndroid={'white'} 
          defaultValue={this.state.guests[i].first_name} 
         /> 
        </View> 
       </View> 
       <View style={styles.guestInput}> 
        <Text style={styles.guestLabel}>Last Name</Text> 
        <View style={styles.guestFieldBox}> 
         <TextInput 
          style={styles.guestField} 
          underlineColorAndroid={'white'} 
          defaultValue={this.state.guests[i].last_name} 
         /> 
        </View> 
       </View> 
      </View> 
     ) 
    } 
    return guestInfo; 
}