Question

我正在尝试使用“ for”循环动态呈现表单，并且呈现效果很好，但是当我尝试更改选择器中的值时，它发生了变化，但立即更改为默认值，所以我需要做的是解决这个问题？

class Datos extends Component {
    cotizadorData: any;
    planesData: any;
    dataStructure =
    {
        id: 1,
        name: '',
        lastName: '',
        email: '',
        documentNumber: '',
        dateOfBirth: '',
        age: '',
        gender: 'M',
        areaCode: '',
        phoneNumber: '',
        medicalObservation: 'Sin Observaciones'
    };
    emergencyContactDataStructure =
    {
        name: '',
        email: '',
        areaCode: '',
        phoneNumber: ''
    };
    planCode: string = '';
    departurePlaceCode: string = '';
    arrivalPlaceCode: string = '';
    passengersArray: Array = [];
    additionalPassengersCount: number = 0;
    additionalPassengersArray: Array = [];
    additionalPassengersView: Array = [];
    __isMounted: string = 'false';
    mainPassengerAreaCodeRef: any;
    emergencyContactAreaCodeRef: any;

    apiKey: string = '';
    xmlForOrder: string = '';

    constructor(){
        super();
        this.state = {
            showLoader: false,
            countries : [ {
                label: '',
                value: ''
            } ],
            holderData: this.dataStructure,
            additionalPassengers: [],
            additionalPassengersView: [],
            emergencyContact: this.emergencyContactDataStructure
        };
    }

    async componentDidMount () : void {

        this.setState({
            showLoader: true
        });
        await AsyncStorage.setItem('dataComponentIsMounted', 'true');
        this.apiKey = await AsyncStorage.getItem('apiKey');
        this.xmlForCountries = getCountries(this.apiKey);
        this.countries = await getOrbisDataServer(this.xmlForCountries);
        this.processCotizadorData();
        this.setState({
            departurePlace: this.countries[0].description
        });
        this.formatArraysForPickers();
    };

    updateAsyncStorage = async() => {
        this.__isMounted = await AsyncStorage.getItem('dataComponentIsMounted');
        if(!isUndefinedOrNull(this.__isMounted))
        {
            if(this.__isMounted === 'true')
            {
                this.processCotizadorData();
            }
        }
    };

    processCotizadorData = async() => {
        this.additionalPassengersCount = 0;
        this.additionalPassengersArray = [];
        this.cotizadorData = await AsyncStorage.getItem('cotizadorData');
        this.planesData = JSON.parse(await AsyncStorage.getItem('planesData'));
        if(!isUndefinedOrNull(this.cotizadorData))
        {
            this.cotizadorData = JSON.parse(this.cotizadorData);
            this.additionalPassengersCount = (this.cotizadorData.youngs + this.cotizadorData.adults +
                this.cotizadorData.semiSeniors + this.cotizadorData.seniors) - 1;
            let id = 2;
            for(let i = 0; i < this.additionalPassengersCount; i++)
            {
                this.additionalPassengersArray.push({
                    id: id,
                    name: '',
                    lastName: '',
                    email: '',
                    documentNumber: '',
                    dateOfBirth: '',
                    age: '',
                    gender: 'M',
                    areaCode: '',
                    phoneNumber: '',
                    medicalObservation: 'Sin Observaciones'
                });
                id++;
            }
            this.setState({
                additionalPassengers: this.additionalPassengersArray
            });
            this.renderAdditionalPassengersForms();
        }
    };

setAdditionalPassengerGender = (additionalPassenger, value) => {
        let additionalPassengersModified = [...this.state.additionalPassengers];
        let index = additionalPassengersModified.findIndex(el => el.id === additionalPassenger.id);
        additionalPassengersModified[index] = {...additionalPassengersModified[index], gender: value};
        this.setState({
            additionalPassengers: additionalPassengersModified
        });
    };

renderAdditionalPassengersForms = () => {

        for(let i = 0; i < this.additionalPassengersArray.length; i++)
        {
            this.additionalPassengersView.push(
                        <View>
                            <Text style={[styles.normalFont, styles.label]}>SEX</Text>
                            <Picker
                                selectedValue={this.state.additionalPassengers[i].gender}
                                style={{height: 50, width: 100}}
                                onValueChange={(value) => {this.setAdditionalPassengerGender (this.additionalPassengersArray[i], value)}}>
                                <Picker.Item label="Male" value="M"/>
                                <Picker.Item label="Female" value="F"/>
                            </Picker>
                        </View>
)
}this.setState({
            additionalPassengersView: this.additionalPassengersView
        });

}

我希望更改所选对象的选择器值。

编辑：我添加了整个组件

Answer 1

由于您的UI在堆积this.additionalPassengersView上的视图时没有问题，因此我想每次其他乘客选择器中的任何值更改时都不会调用renderAdditionalPassengersForms。

您的问题是：做出选择时必须更新Picker上的selectedValue。否则，选择器将回滚为其未更新的所选值，如您所描述的行为。

我使用redux-form管理表单。但是，假设您不想使用它，则可以为选择器创建一个新组件，将选择器选择的值放在状态上，并在onValueChange回调上更新此状态

当我在选择器中调用setstate时，它将值更改两次

1 个答案: