reactjs - 使用 react redux axios 在 FormData 上创建具有更改输入表单或条件的新状态对象

Question

这是我在这里的第二篇文章，所以请对我冷静:)

在自己的项目中，我们有一个编辑配置文件表单要发送。后台团队制定发送请求的规则：

-不要发布带有空值或相同值的请求，只发布有修改的值。

所以...，用 axios 准备http://XXX.XXX.XX/user/edit上的请求，我使用我的 reducer 中的 states 字段，并用它们制作一个 FormData。

有两种方法可以解决这个问题，但我没有成功...

1- 在 FormData 中创建条件：

制作带有条件的FormData，如果value为空、null或undefined，不要放在FormData中。可能吗 ？如何？

2- 如果输入表单发生变化，则创建新的状态对象

每次输入状态发生变化时，处于“编辑”状态的对象都会添加具有值的新字段。

现在我可以拥有像“编辑”这样的对象状态和空对象。如果我在输入表单中写入，则处于“编辑”状态的对象会收到一个带有该值的新字段，此处发送正确。但是，如果更改其他输入表单，则会覆盖先前的字段。因此，如果我可以添加新字段并在此对象中保留以前的字段，那么将它放在 FormData 中会很好。可能吗 ？如何 ？

我项目中的所有过程：

减速器：

import {    
    EDIT_USER_CHANGE, 
    EDIT_USER_SUBMIT,
    EDIT_USER_SUCCESS, 
    EDIT_USER_ERROR, 
    TOGGLE_EDIT_USER_UPLOAD_COVER,
    TOGGLE_EDIT_USER_UPLOAD_AVATAR,
        } from '../actions/profile-actions';


const initialState = {
    firstname: "",
    lastname: "",
    nickname: "",
    email: "",
    city: "",
    postal: "",
    presentation: "",
    cover: "",
    avatar: "",
    currentPassword: "",
    password1: "",
    password2: "",
    editMessage:"",
    edit: {},
    openedCover: false,
    openedAvatar: false,
    loading: false,
}

const editProfile = (state = initialState, action = {}) => {
    switch (action.type) {
        case EDIT_USER_CHANGE:
            return {
                ...state,
                ...action.payload
                // edit: action.payload
            };
        case EDIT_USER_SUBMIT:
            return {
                ...state,
                loading: true,
            };
        case EDIT_USER_SUCCESS:
            return{
                ...state,
                ...action.payload,
                loading: false,
            };        
        case EDIT_USER_ERROR:
            return{
                ...state,
                loading: false,
            }

EditProfile 中间件：

import axios from 'axios';
import { EDIT_USER_SUBMIT, editUserSuccess, editUserError } from '../actions/profile-actions';

export default (store) => (next) => (action) => {
    next(action);
    const { dispatch } = store;

    switch (action.type){
            case EDIT_USER_SUBMIT:

              const bodyFormData = new FormData();
              bodyFormData.set('firstname' , store.getState().editProfile.firstname)
              bodyFormData.set('lastname' , store.getState().editProfile.lastname )
              bodyFormData.set('email' , store.getState().editProfile.email )
              bodyFormData.set('nickname' , store.getState().editProfile.nickname )
              bodyFormData.set('presentation' , store.getState().editProfile.presentation )
              bodyFormData.set('city' , store.getState().editProfile.city )
              bodyFormData.set('postal' , store.getState().editProfile.postal )
              bodyFormData.set('password' , store.getState().editProfile.password1 )
              
             // bodyFormData.set('edit' , store.getState().editProfile.edit )

              const token = localStorage.getItem('MTRtoken');
              let id = store.getState().signIn.data.currentUser.id ;

              axios({
                  headers: { 
                    Authorization: `Bearer ${token}`,
                    "Content-Type": "multipart/form-data;boundary=----WebKitFormBoundaryyrV7KO0BoCBuDbTL"
                  },
                  method: 'post',
                  url:  `http://127.0.0.1:8000/api/user/${id}/edit`,
                  data: bodyFormData,
              })

              .then((res) => {
                  const serverResponse = res.data;
                  console.log(serverResponse);
                  dispatch(editUserSuccess(serverResponse));
                })
                .catch((err) => {
                  console.log(err);
                  dispatch(editUserError());
                });
              break;
        default:
          break;
    } 
  };

在此先感谢您的帮助:)

标签： reactjsreduxreact-reduxaxiosmultipartform-data