FormData ว่างเปล่าในตอนที่พ่อแม่ผ่านจากเด็กส่วนประกอบ

เชิดแพลตตินั่มทั้งหมดไปใช่เตือน! :ฉันการตั้งค่า FormData ในเด็กส่วนประกอบและส่งมันให้พ่อแม่ส่วนประกอบการใช้ formReducer และข่าวด่วน,แต่พ่อแม่ formData.รายการ()จะเป็นเสมอเปล่า!

ChildComponent.js

function ChildComponent({signed, fileAttached}){
    const { dispatch } = useContext(ContactFormContext);

     const changeHandler = (event) => {

const formData = new FormData();

formData.append('File', event.target.files[0]);


dispatch({ type: "FILE_ATTACHED", payload: formData })
};

return (
<>
            <div>
        <input type="file" name="file" onChange={changeHandler} />
    </div>
</>);
}

ParentComponent.js

function useFormProgress(fileAttached) {
     
     
    function goForward() {
        const currentStep = 1;

        let appvariables = [
                {
                  "key": "PUID",
                  "value": "a2sd"
                },
                {
                  "key": "ApplicationNames",
                  "value": "Trello, abc"
                }
              ];
        switch(currentStep) {
          case 0:
            break;
          case 1:
            console.log(fileAttached);
          if(fileAttached != null)
              sendEmail("Resignation Letter", appvariables, fileAttached);
          break;
        }
    }
    return [goForward];
}

function sendEmail(templateName, variables, attachment){
  console.log("sending email...");
    const requestBody = {
                    "templateName": templateName,
                    "recipients": [    
                    "[email protected]"
                    ],
                    "variables":  variables,
                    "files": attachment
                };

fetch('https://localhost:5001/api/Email',{
  method:'Post',
  body: JSON.stringify(requestBody),
  headers:{'Content-Type': 'application/json'},
 });

}

const initialState = {
      signed: "",
      fileAttached: null
};

function formReducer(state, action) {
   switch (action.type) {
    case "SIGNED":
      return { ...state, signed: action.payload };
    case "FILE_ATTACHED":
      return {...state, fileAttached: action.payload};
    default:
      throw new Error();
  }
}


function ParentComponent() {

   const [state, dispatch] = useReducer(formReducer, initialState);
     const { signed, fileAttached } = state;

     const steps = [<ChildComponent {...{signed, fileAttached}}/>];

   const [goForward] = useFormProgress(fileAttached);


    return (
        <ContactFormContext.Provider value={{ dispatch }}>
          <div>{steps[0]}
        <div><button onClick={e => {
           e.preventDefault();
              goForward();
        }}
             
        >  Parent Button
        </button>
        </div>
    </div>
        </ContactFormContext.Provider>
       );
}

ContactFormContext.js

const ContactFormContext = React.createContext();

ในที่เปลี่ยนคำให้การด้านบน(ParentComponent),คอนโซล.ปูมบันทึก(FileAttached)แสดง FormData กับ 0 รายการ(ดูมอดูลของภาพติด)เหมือนกันที่รูปแบบ api การร้องขอไม่ประสบความสำเร็จ!

คุณสามารถลองมันออกไป https://jscomplete.com/playground

1. เพิ่มไอคอนถาดระบบขอบด้านบน

2. เพิ่มเด็กส่วนประกอบรหัส

3. เพิ่ม parentcomponent รหัส

4. เพิ่มคลังตามเส้น

     ReactDOM.render(<ParentComponent/>, mountNode);
   

MyAPI วิธีการ

[HttpPost]
    public JsonResult Get(EmailRequest email)
    {
         //the request never comes here
     }

EmailRequest.à™àà§à•à£àà™

public class EmailRequest
{
    public string TemplateName { get; set; }
    public string[] Recipients { get; set; }
    public List<Variables> Variables { get; set; }
    public FormFileCollection files { get; set; }
}