如何在Laravel中获取React Formik嵌套对象的值

发布时间:2020-07-07 13:25

我有一个使用formik进行响应的表单,该表单存储诸如用户的名称和地址之类的信息。地址字段与formik一起存储为嵌套对象。现在,当我从react应用程序将formdata发布到laravel时,我不知道如何访问那里的地址字段并应用验证或插入数据库。我很高兴对下面的代码有什么建议。谢谢。

我的React formik表单代码:


<Formik
 initialValues={{ 
   fname: '', 
   mname: '', 
   lname: '', 
   address: { 
      adr_line_1: '', 
      adr_line_2: '', 
      country: '', 
      state: '', 
      city: '', 
      pincode: '' 
   },
 }}
 onSubmit={(values, actions) => {
   this.submitFrom(values, actions);
 }}
 enableReinitialize = {true}
 validationSchema={validate}
>
{(props: FormikProps<any>) => (
   <Form>
     <Field component={this.myTextInput} name="fname" type="text"></Field>
     <Field component={this.myTextInput} name="mname" type="text"></Field>
     <Field component={this.myTextInput} name="lname" type="text"></Field>
     <Field component={this.myTextInput} name="address.adr_line_1" type="text"></Field>
     <Field component={this.myTextInput} name="address.adr_line_2" type="text"></Field>
     <Field component={this.myTextInput} name="address.country" type="text"></Field>
     <Field component={this.myTextInput} name="address.state" type="text"></Field>
     <Field component={this.myTextInput} name="address.city" type="text"></Field>
     <Field component={this.myTextInput} name="address.pincode" type="text"></Field>
     <button type="submit">
        Submit
     </button>
   </Form>
)}
</Formik>

我的React Redux动作创建者代码:


export const applyPersonalDetails = (formValues) => {
    return async dispatch => {
        const url = `/auth/apply/personal-details`;
        var formdata = new FormData();
        const token = getCookie("userToken");

        formdata.append("fname", formValues.fname);
        formdata.append("mname", formValues.mname);
        formdata.append("lname", formValues.lname);
        formdata.append("address", formValues.address);

        const response = await api
            .post(
                url, 
                formdata,
                {
                    headers: {
                      Authorization: `Bearer ${token}`
                    }
                }
            )
            .then(res => {
                return res;
            })
            .catch(error => {
                return error.response;
            });
        
        dispatch({
            type: "SUBMIT_PERSONAL_DETAILS",
            payload: response
        });
    };
}

回答1