React:未捕获(承诺中)错误:请求失败,状态代码为 400
2022-05-06
805
我将一个 uid、一个 token 和两个表单输入从 formik 发送到我的 django rest api 以重置密码。当我这样做时,我收到一个 400 错误,响应说我缺少 new_password1 和 new_password2:
{"new_password1":["This field is required."],"new_password2":["This field is required."]}
我认为这是因为我将值包装在 uid 和 token 中,如下所示:
axios.post(API.auth.passwordResetConfirm, {uid, token, values} )
如果我这样做,它会给我一个响应,要求我输入 uid 和 token,但不输入密码:
axios.post(API.auth.passwordResetConfirm, values )
我如何发送两个密码和 uid 以及 token,而不会像这样“嵌套”值(如果这是我认为的问题)?
这是完整代码:
import { useState } from 'react';
import { useParams } from "react-router"
import axios from "axios"
import { Formik, Field, Form } from 'formik';
import { API } from '../api'
export function ResetConfirm() {
const [loading, setLoading] = useState(false)
const [success, setSuccess] = useState(false)
const { uid } = useParams()
const { token } = useParams()
console.log(uid);
console.log(token);
function handleSubmit(values, { resetForm }) {
setLoading(true)
axios.post(API.auth.passwordResetConfirm, {uid, token, values} )
.then(res => {
resetForm()
setSuccess(true)
})
.finally(() => setLoading(false))
}
return (
<div>
{success && "You will receive a verification email."}
{loading && "Loading..."}
<Formik
initialValues={{
new_password1: '',
new_password2: '',
}}
onSubmit={handleSubmit}>
{({ errors, touched }) => (
<Form>
<Field name="new_password1">
{({ field, form }) => (
<label className="mt-3 block">
<span className="text-gray-700">New password</span>
<input
{...field}
type="text"
className="
mt-1
block
w-full
rounded-md
border-gray-300
shadow-sm
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
"
placeholder=""
style={
form.touched.new_password1 && form.errors.new_password1 ? (
{ border: '2px solid var(--primary-red)'}
) : null
}
/>
</label>
)}
</Field>
<Field name="new_password2">
{({ field, form }) => (
<label className="mt-3 block">
<span className="text-gray-700">New password</span>
<input
{...field}
type="text"
className="
mt-1
block
w-full
rounded-md
border-gray-300
shadow-sm
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
"
placeholder=""
style={
form.touched.new_password2 && form.errors.new_password2 ? (
{ border: '2px solid var(--primary-red)'}
) : null
}
/>
</label>
)}
</Field>
<button className="mt-3 bg-blue-100 rounded-md shadow-sm text-lg px-5 py-3 hover:bg-blue-200"
type="submit">
Submit
</button>
</Form>
)}
</Formik>
</div>
)
}
1个回答
要取消嵌套
values
,您可以使用
spread 语法
。
console.log({ uid, token, ...values });
// {
// uuid: "1",
// token: "asdf",
// new_password1: "Password123",
// new_password2: "Password123",
// }
请注意,如果
values
包含键
uid
或
token
,它将覆盖
uid
/
token
的值。因此,您必须确保它仅包含白名单键。
或者,您可以反转顺序。
{ ...values, uid, token } 。
。这将首先设置
values
的键/值,然后设置
uid
和
token
的值(如果存在则覆盖先前的值)。
const uid = "1";
const token = "asdf";
const values = {
new_password1: "Password123",
new_password2: "Password123",
uid: "2",
};
console.log({ uid, token, ...values });
console.log({ ...values, uid, token });
3limin4t0r
2022-05-06