react formik+axios post，数据在后台返回undefined

Question

我正试图用formik表单向axios发布数据，但当我检查后端时，数据不断返回未定义，似乎后端根本没有接收到数据，浏览器响应AxiosError和服务器响应500。此外，在我提交表单后，我还收到了另一个错误A component is changing a controlled input to be uncontrolled

这是我使用formik和axios的注册功能。post

function Test() {
const validate = Yup.object({
name: Yup.string()
.max(15, 'Must be 15 characters or less')
.required('Required'),
email: Yup.string()
.email('Email is invalid')
.required('Email is required'),
password: Yup.string()
.min(6, 'Password must be at least 6 charaters')
.required('Password is required')
})
return (
<Formik
initialValues={{
name: '',
email: '',
password: ''
}}
validationSchema={validate}
onSubmit={data => {
console.log(data)
let formData = new FormData();
formData.append('name', data.name)
formData.append('email', data.email)
formData.append('password', data.password)
axios({
method: 'POST',
url: 'http://localhost:5000/userdata',
data: formData
})
.then(function (res) {
console.log(res)
alert('Successfully signed up!');  
})
.catch(function (res) {
console.log(res)
});
}}
>
{formik => (
<div className='fbody'>
<div className='fcontainer'>
<div className="contact-box">
<div className="right">
<h1 className="my-4 font-weight-bold .display-4">Sign Up</h1>
<Form>
<TextField className="field" label="First Name" name="name" type="text" />
<TextField className="field" label="Email" name="email" type="email" />
<TextField className="field" label="password" name="password" type="password" />
<button className="btn" type="submit">Register</button>
<button className="btn" type="reset">Reset</button>
</Form>
</div>
</div>
</div>
</div>
)}
</Formik>
)
}
export default Test;

Answer 1

您的组件有一些问题。

您的输入不受控制。将value和onChange道具添加到您的输入中，如：

<TextField
className="field"
label="First Name"
name="name"
type="text"
value={formik.values.name}
onChange={formik.handleChange}
/>

然后更新onSubmit处理程序。你不需要做new FormData()

onSubmit={data => {
console.log(data);
axios({
method: 'POST',
url: 'http://localhost:5000/userdata',
data: data
})
.then(function (res) {
console.log(res)
alert('Successfully signed up!');  
})
.catch(function (res) {
console.log(res)
});
}}

Answer 2

您忘记将multipart/formData标头添加到axios请求中：

axios({
method: 'POST',
url: 'http://localhost:5000/userdata',
data: formData,
headers: {'Content-Type': 'multipart/form-data'}
})