在反應鉤子中的formData中獲取空值

大家好，我在使用帶有 formData 的 React 功能組件掛鉤時遇到了一些問題，我在 formData 中獲取空資料我正在使用 usestate 掛鉤，但我正在獲取 balnk 陣列作為輸出

const [profilestate, setProfileState] = useState({
        dob:"",
        city:"",
        state:"",
        country:"",
        school: "",
        board: "",
        age: "",
        gender: "",
        degree_college: "",
        masters_college: "",
        organizations: "",
        department: "",
        title: "",
        profile_image:""
});

const handleChange = (e) => {
        setProfileState({
            ...profilestate,
            [e.target.name]: e.target.value
      });
}
const handleFileChange = (e) => {
        setProfileState({
            ...profilestate,
            profile_image: e.target.files[0]
        })
}
    
const { dob, state, city, country, school, board, age, gender, degree_college, masters_college, organizations, department, title, profile_image } = profilestate;
        
const formdata = new FormData();
         
formdata.append('dob', dob);
formdata.append('city', city);
formdata.append('state', state);
formdata.append('country', country);
formdata.append('school', school);
formdata.append('board', board);
formdata.append('age', age);
formdata.append('gender', gender);
formdata.append('degree_college', degree_college);
formdata.append('masters_college', masters_college);
formdata.append('organizations', organizations);
formdata.append('department', department);
formdata.append('title', title);
formdata.append('profile_image', profile_image);

const response = await fetch(Constants.url   'auth/addUserDetail', {
        method: 'POST',
        headers: {
              'Content-type': 'application/json',
                'Authorization': `Bearer ${JSON.parse(localStorage.getItem('token'))}`
            },
         body: formdata
       });
const result = await response.json();
       if (result.status === 'success') {
            hideLoader()
           toast.success(result.message);
       }
        else {
            hideLoader()
            toast.error(result.message);
             return false;
        }

任何人都可以幫助我解決這個問題我正在獲取資料作為空陣列我在鉤子中使用 formData 任何幫助將不勝感激。

uj5u.com熱心網友回復：

您在任何函式之外使用 formData，這將使用您的狀態的初始值（即 profileState 為空字串）初始化 formData。用空字串初始化 formData 會導致未定義或空值。

因此，您應該將任何函式之外的整個 formData 部分包裝到另一個函式中，例如 handleSubmition，當用戶從您的組件上傳任何表單時，該函式將被觸發。

const handleSubmition = (e) => {
  e.preventDefault();
  const formdata = new FormData();

  formdata.append('dob', dob);
  formdata.append('city', city);
  formdata.append('state', state);
  formdata.append('country', country);
  formdata.append('school', school);
  formdata.append('board', board);
  formdata.append('age', age);
  formdata.append('gender', gender);
  formdata.append('degree_college', degree_college);
  formdata.append('masters_college', masters_college);
  formdata.append('organizations', organizations);
  formdata.append('department', department);
  formdata.append('title', title);
  formdata.append('profile_image', profile_image);

  const response = await fetch(Constants.url   'auth/addUserDetail', {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
      'Authorization': `Bearer ${JSON.parse(localStorage.getItem('token'))}`
    },
    body: formdata
  });
  const result = await response.json();
  if (result.status === 'success') {
    hideLoader()
    toast.success(result.message);
  } else {
    hideLoader()
    toast.error(result.message);
    return false;
  }
}

uj5u.com熱心網友回復：

const addUser= async ()=>{
        const api_url = Constants.url   'auth/addUserDetail';
        const config = {
         headers: {
           contentType: 'application/json',
          'Authorization': `Bearer ${JSON.parse(localStorage.getItem('token'))}`
           
          }
        }
        const response = await axios.post(url, {...profilestate},config);
        console.log(response.data); //get the response
        /* do rest of stuff */
} 

根本不需要使用表單資料。Api 只是期望您可以通過axios輕松發送的物件形式的表單主體。您已經擁有包含所有資料的本地狀態物件。我希望上述想法可以幫助您找出并簡化問題。

標籤：javascript 反应

上一篇：CSSStyleDeclaration在反應中使用useRef時沒有給出任何值

下一篇：在本機反應中移動到下一個螢屏