React Native Form 一次只提交一个值答案

【问题标题】：React Native Form only submitting one value at a timeReact Native Form 一次只提交一个值
【发布时间】：2021-07-25 07:31:31
【问题描述】：

当我向我的 api 提交表单时，奇怪的是它只发送我在表单上填写的最后一个输入。我将所有表单属性保存到 const 对象，然后通过 axios 发布请求发送。这是我的第一个反应原生应用程序，我不知道这个问题的原因是什么。我有另一种没有嵌套属性的表单，但可以毫无问题地保存。如何使用嵌套表单对象在一次 api 调用中将所有表单输入一起发送？

服务器日志

Started POST "/api/v1/applicant_forms" for 127.0.0.1 at 2021-05-02 13:08:14 -0400
Processing by Api::V1::ApplicantFormsController#create as JSON
  Parameters: {"applicant_form"=>{"user_id"=>"11", "personal_info_attributes"=>{"prefix"=>"Mr"}}}

ApplicantForm.js

handleSubmit(e) {
        e.preventDefault();
        const {applicant_form: {personal_info_attributes: {prefix, first_name}}, user_id} = this.state;
        const data_obj = {
          applicant_form: {
            user_id,
            personal_info_attributes: {
              prefix,
              first_name
            }
         }
        }
        const { navigation } = this.props;

        return axios({
          url: `http://127.0.0.1:3000/api/v1/applicant_forms`,
          method: 'POST',
          data: data_obj,
        }).then(response => {
          console.log("Successful Response" + response)
          navigation.navigate('home')  
        }).catch(err => {
          showMessage({
            message: "Something went wrong!",
            description: "Testing",
            type: 'danger'
          })
        })
      }


render() {
        return(
        <KeyboardAvoidingView behavior="padding">  
        <View style={{paddingVertical: 5, paddingHorizontal: 14}}>
         <View style={{backgroundColor: '#fff', width: Dimensions.get('window').width * 0.9, minHeight: 50, padding: 2, borderColor: 'gray', borderRadius: 4, borderWidth: 1, height: Dimensions.get('window').height * 0.8}}>
            <View style={styles.centerText}>
              <Text>Applicant Profile</Text>
            </View>
            <ScrollView>
              <Text>Prefix</Text>
              <FormInput   
              inputStyle={styles.input}
              autoCapitalize="none" 
              onSubmitEditing={() => this.applicant_form.personal_info_attributes.prefix} 
              autoCorrect={false} 
              keyboardType='default' 
              returnKeyType="next" 
              placeholder='Prefix: Mr. Mrs. Ms., etc'
              onChangeText={prefix => this.setState({ applicant_form: {personal_info_attributes: {prefix: prefix} }})}
             // value={this.state.applicant_form.personal_info_attributes.prefix} 
             />
                                 
             <Text>First Name</Text>
              <FormInput   
              inputStyle={styles.input}
              autoCapitalize="none" 
              onSubmitEditing={() => this.applicant_form.personal_info_attributes.first_name} 
              autoCorrect={false} 
              keyboardType='default' 
              returnKeyType="next" 
              placeholder='First Name'
              onChangeText={first_name => this.setState({ applicant_form: {personal_info_attributes: {first_name: first_name} }})}
             // value={this.state.applicant_form.personal_info_attributes.first_name} 
              />


<TouchableOpacity style={styles.saveButtoncontainer} onPress={e=>{this.handleSubmit(e)}}>
              <Text style={styles.buttontext}>Save Employment Profile</Text>
            </TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
)

【问题讨论】：

现在使用 Formik。我怀疑这种方法是否可行。

标签： reactjs react-native axios

【解决方案1】：

每次编辑文本字段时，您都会覆盖 applicant_form 值。

以下代码替换状态applicant_form的内容为{personal_info_attributes: {prefix: prefix} }。如果您之前设置了first_name，它将被删除。

<FormInput
  ...
  onChangeText={prefix => this.setState({ applicant_form: {personal_info_attributes: {prefix: prefix} }})}
/>

为防止覆盖对象，您可以使用扩展运算符确保值被克隆并相应更新。

<FormInput
    onChangeText={prefix => 
        this.setState(prevState => ({
            applicant_form: {
                ...prevState.applicant_form,
                personal_info_attributes: {
                    ...prevState.applicant_form.personal_info_attributes,
                    prefix: prefix,
                }
            }
        }))
    }
/>

您可以在此处阅读更多信息：What's the best alternative to update nested React state property with setState()?

【讨论】：