Loops 在React Native中使用key或ref

Loops 在React Native中使用key或ref,loops,key,react-native,Loops,Key,React Native,因此,我在react native中使用loop时遇到了问题,主要与如何更新默认值以及如何在循环许多文本输入时获取文本输入的每个值有关。我认为解决方案是使用密钥,但我不确定如何在代码中实现它。或者我们可以用ref吗 所以问题的细节是这样的:循环中的noGuest由用户输入,最多有4个guest。基于每个循环中的下拉值,我希望通过设置状态,直接用现有数据更新当前索引中的所有字段。但由于我不知道如何使用该键,当我在Guest 1的下拉列表中选择一个选项时,所有字段(包括Guest 2、Guest 3

因此,我在react native中使用loop时遇到了问题,主要与如何更新默认值以及如何在循环许多文本输入时获取文本输入的每个值有关。我认为解决方案是使用密钥,但我不确定如何在代码中实现它。或者我们可以用ref吗

所以问题的细节是这样的:循环中的noGuest由用户输入,最多有4个guest。基于每个循环中的下拉值,我希望通过设置状态,直接用现有数据更新当前索引中的所有字段。但由于我不知道如何使用该键,当我在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;
}
构造函数(道具){
超级(道具);
this.state={
来宾信息:'',
名字:'',
姓氏:“”,
};  
}
OnGuestName更改(访客名称){
log('executing onGuestNameChange');
让guest=guestName.value;
var len=来宾_profile.length;
for(设i=0;i

我们非常感谢您的任何建议。谢谢。

我没有你的组件的所有代码,但从我所能告诉你的,类似这样的东西应该可以解决你的问题:

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;
}
构造函数(道具){
超级(道具);
this.state={
来宾信息:'',
嘉宾:[]
};  
}
OnGuestName更改(访客名称,i){
log('executing onGuestNameChange');
让guest=guestName.value;
让客人=[]
var len=来宾_profile.length;
for(设i=0;i
您能再显示一些代码吗,即OnGetNameChange。谢谢嗨,纳德,我已经添加了代码。感谢您的响应。我得到了一个有关defaultValue的错误,其中指出
this.state.guests[I].first\u name
未定义(无法获取未定义的属性first\u name)。我已经在构造函数中添加了
guests:[]
。但它仍然不起作用。