我实现了Django rest_auth，将其用作应用程序的身份验证后端。这是通过Postman测试时发现的。然而，如果我现在从客户端(React(发送登录POST请求，它会返回
Success: {password: Array(1)}password: Array(1)0: "This field is required."length: 1[[Prototype]]: Array(0)[[Prototype]]: Object
当我在submitHandler中记录传输的表单数据时，我会得到
{username: 'admin', password: 'test'}
password: "test"
username: "admin"
在我看来很好。我不确定如何调试这个以及错误可能在哪里。
import {Fragment, useState, useReducer} from "react";
import {Link} from "react-router-dom";
// Initiate Form reducer
const formReducer = (state, event) => {
return {
...state,
[event.name]: event.value
}
};
const Login = () => {
const [formData, setFormData] = useReducer(formReducer, {});
const [logging, setLogging] = useState(false);
const submitHandler = event => {
console.log(formData)
event.preventDefault();
setLogging(true);
fetch('http://127.0.0.1:8000/api/user/auth/login/', {
method: 'POST',
body: JSON.stringify({formData}),
headers: {'Content-Type': 'application/json'},
})
.then(res => res.json())
.then(result => {
console.log('Success:', result);
})
};
return (
<Fragment>
<form onSubmit={submitHandler}>
<div className="text-lg text-sx-purple-dark text-center mb-4">Login to your Salaryx Account</div>
<div>
<div className="relative top-3 left-4 pl-2 pr-2 text-sx-purple-dark-soft bg-sx-white-plain w-max">Username*</div>
<input
type="text"
className="w-full mb-4 h-auto text-sm rounded md indent-2 outline-0 border-sx-pink border-2 focus:border-2 focus:border-sx-purple border-solid h-12"
autoCapitalize="none"
autoComplete="username"
autoFocus={true}
name="username"
required={true}
onChange={changeHandler}
>
</input>
</div>
<div>
<div className="relative top-3 left-4 pl-2 pr-2 text-sx-purple-dark-soft bg-sx-white-plain w-max">Password*</div>
<input
type="password"
className="w-full mb-4 h-auto text-sx-purple-dark-soft text-sm rounded md indent-2 outline-0 border-sx-pink border-2 focus:border-2 focus:border-sx-purple border-solid h-12"
autoComplete="current-password"
name="password"
required={true}
onChange={changeHandler}
>
</input>
<Link className="" to="/auth/password_change/">
<div className="text-center text-xs opacity-40 flex justify-end relative -top-4">Forgot Password?</div>
</Link>
</div>
<button className="bg-sx-pink w-full p-2 rounded hover:opacity-70" type="submit">Log In</button>
<Link className="" to="/auth/signup">
<div className="opacity-40 mt-2 text-center text-sm">No account yet? Sign Up!</div>
</Link>
</form>
</Fragment>
)
}
export default Login
您正在此处的参数中创建一个新对象：
body: JSON.stringify({formData}),
导致body为：
{"obj":{"username":"username","password":"password"}}
去掉花括号，应该会有所帮助。