#reactjs #forms #multipartform-data
#reactjs #формы #составная форма-данные
Вопрос:
Я пытаюсь использовать FormData() для отправки формы входа с использованием Reactjs и перехватов, но это не работает. Значения, возвращаемые компонентами FormData, кажутся правильными. Я пробовал это как с Axios, так и с Fetch, и ни один из них не работает. Я также пробовал разные способы заполнения элемента FormData, даже с фиксированными строками, но ни один из них не работает.
Я уверен, что совершаю какую-то наивную ошибку, но я не могу ее найти. Не могли бы кто-нибудь из вас мне помочь, пожалуйста?
Спасибо
import React, {useState} from 'react'
import axios from 'axios'
function useLoginForm() {
const [field, setField] = useState({email: '', password: ''})
const changeHandler = (event) => {
setField({...field, [event.target.name]: event.target.value})
}
const onBlurHandler = (event) => {
setField({...field,[event.target.name]: event.target.value});
}
const fileHandler = (event) => {
console.log(event.target.files[0])
}
const submitHandler = async (event) => {
event.preventDefault();
for(let [name, value] of loginFormData) {
console.log(`KEY: ${name} VALUE = ${value}`);// Logging outcome details
}
const url = 'https://my_url/post'
}
console.log(`Submit --> ${field.email} - Password ${field.password}`);
try{
const response = await axios.post(url, loginFormData,{
headers: {
"Content-type": "multipart/form-data" /* ; boundary=${loginFormData._boundary}*/
},
}
)
console.log(response.data)
}catch(error){
console.log(error)
}
}
return (
<div>
<p>{field.email} - {field.password}</p>
<form id="loginForm" name="loginForm" onSubmit={submitHandler}>
<label htmlFor="email">email</label>
<input type="text" name="email" id="email" onChange={changeHandler} /* onBlur={onBlurHandler} */></input>
<label htmlFor="password">Password</label>
<input type="password" name="password" onChange={changeHandler} /* onBlur={onBlurHandler} */></input>
<input type="submit" value="Login" />
</form>
</div>
)
}
export default useLoginForm
Results:
KEY: email VALUE = xyz_xyz@VBM.com useLoginForm.js:47
KEY: password VALUE = Xxxxxx useLoginForm.js:47
Submit --> xyz_xyz@VBM.com - Password Xxxxxx useLoginForm.js:57
XHRPOSThttps://my_url/post
[HTTP/1.1 404 Not Found 6681ms]
1
-----------------------------345147470230284216993885766804
2
Content-Disposition: form-data; name="email"
3
4
xyz_xyz@VBM.com
5
-----------------------------345147470230284216993885766804
6
Content-Disposition: form-data; name="password"
7
8
Xxxxxx
9
-----------------------------345147470230284216993885766804--
10
Комментарии:
1. ваша серверная часть не получает значения, не так ли?
2. Нет, это не ответ. Я получаю сообщение «404 не найдено». Итак, пользователь (электронная почта) неверен