如何更改SelectField的值以获取该值并以React Native的方式发送到服务器

Question

There are two Select field where am getting data in drop down . Now when I am changing the value and selecting other value its throwing error . Please suggest me how can I change these value dynamically and submit to server .On button click I have to update this to server . Please help me for that .

class UpdateBillPreferences extends Component {
      constructor(props) {
        super(props);
        const {navigation,clmmasterData} =this.props;
        this.state = {
          title: 'Update Bill Preferences',
          mobile: navigation.state.params.customer.service.serviceNumber,
          icon: 'sim',
          email:'',
          smsNum:'',
          faxNum:'',
          preferredLanguage: navigation.state.params.customerInfo[0].billingPreferenceDetails.presentationLanguageCode,
          preferredCurrency: navigation.state.params.customerInfo[0].billingPreferenceDetails.preferedCurrencyCode,
        };
        this.presentationLanguageOptions=[{value:'english',label:'English'}, {value:'spanish',label:'Spanish'}]
        this.preferredCurrencyOptions=[{value:'dollar',label:'Dollar'}, {value:'niara',label:'Niara'}]
      }

      componentDidMount() {

      }

      OnButtonClick = async (preferredLanguage, preferredCurrency,email,smsNum,faxNum) => {
        const { OnButtonClick } = this.props;
        await OnButtonClick(preferredLanguage, preferredCurrency,email,smsNum,faxNum);
        this.setState({
          preferredLanguage: '',
          preferredCurrency:'',
          email :'',
          smsNum :'',
          faxNum :''

        })
      }
      simRegionChanged = (val, target) => {
        this.handleChange({ field: "preferredLanguage" }, target);
      };

      handleChange = (props, e) => {
        let tempObj = this.state.presentationLanguageCode;
        tempObj[props.field] = e;
        this.setState({ presentationLanguageCode: tempObj });
      };

      render() {
        let { title, mobile, icon } = this.state;
        const { navigation,clmmasterData} = this.props;
        const {billingAddressDetails,billingPreferenceDetails} = navigation.state.params.customerInfo[0];
       const {masterData , language} = clmmasterData;
        let submitBtn = { label: 'Submit', OnSubmit: this.onSubmit };
        let currencyData=[];
        masterData.preferredCurrency.map(({ code: value, name: label }) => {
          currencyData.push({ value, label });
        });

        let languageData=[];
        masterData.language.map(({ code: value, name: label }) => {
          languageData.push({ value, label });
        });

        return (
          <ImageBackground source={BG} style={styles.imgBG}>
          <ScrollView>
            <View style={styles.container}>
              <View>
                <Header title={title} subtitle={mobile} icon={icon} navigation={navigation}/>
              </View>

                <View style={styles.contentContainer}>
                  <View style={{ padding: 20 }}>
                    <Form style={{ width: '100%' }}>
                      <SelectField
                        label="Presentation Language"
                        node="presentationLanguage"
                        options={languageData}
                        value={this.state.preferredLanguage}
                        onChange={this.simRegionChanged}
                        that={this}
                        setIcon={true}
                        img="LANGUAGE"
                      />

                      <SelectField
                        label="Preferred Currency"
                        options={currencyData}
                        value={this.state.preferredCurrency}
                        node="preferredCurrency"
                        onChange={this.handleChange}
                        that={this}
                        setIcon={true}
                        img="CURRENCY"
                      />

                    <PrimaryBtn label={'submit'} disabled={false} onPress={()=> this.OnButtonClick(this.state.preferredLanguage,this.state.preferredCurrency,

Thanks

Answer 1

Your problem is here:

simRegionChanged = (val, target) => {
  this.handleChange({ field: "preferredLanguage" }, target);
};

handleChange = (props, e) => {
  let tempObj = this.state.presentationLanguageCode;
  tempObj[props.field] = e;
  this.setState({ presentationLanguageCode: tempObj });
};

You are calling handleChange with the prop {field: "preferredLanguage"} . The first line of handleChange then returns undefined because presentationLanguageCode isn't in your state, so when you then do this:

tempObj[props.field] = e;  // tempObj["preferredLanguage"] = e

... it throws the error because you're attempting to set a property on an object that doesn't exist.

It looks like you should just be updating preferredLanguage :

handleChange = (props, e) => {

  this.setState({ preferredLanguage: e });
};