Hola a todos, estoy enfrentando algunos problemas al usar ganchos de componentes funcionales de reacción con formData. Obtengo datos nulos en formData. Estoy usando ganchos usestate pero obtengo una matriz balnk como salida.
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; }cualquiera puede ayudarme en esto. Obtengo datos como una matriz nula. Estoy usando formData en ganchos. Cualquier ayuda sería apreciada.
está utilizando formData fuera de cualquier función, esto inicializaría formData con el valor inicial de su estado, es decir, profileState, que son cadenas vacías. La inicialización de formData con una cadena vacía da como resultado valores indefinidos o nulos.
Por lo tanto, debe envolver toda la parte de formData que está fuera de cualquier función en otra función única como handleSubmition, que se activará cuando el usuario cargue cualquier formulario de su componente.
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; } }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 */ }No es necesario utilizar los datos del formulario en absoluto. Api solo espera el cuerpo del formulario en forma de objeto que puede enviar fácilmente a través de axios . Ya tiene un objeto de estado local que contiene todos los datos. Espero que la idea anterior te ayude a resolver y simplificar el problema.