我正在尝试为运行在Django REST-API上的react应用程序设置前端身份验证。
如果我在Postman上发送请求，那么注册API端点运行良好。然而，当我在前端注册表中键入信息并点击提交时，该程序的行为非常奇怪。
请看下面的代码——我使用useInputState钩子来跟踪给定输入的状态。这很好用。
registerUser函数接收用户名、密码和电子邮件，并向专用的API端点发送Post-Request。
handleSubmit函数检查密码是否匹配，如果不匹配则抛出错误，这也很好。如果密码匹配，它将调用registerUser并提供用户输入。
现在，在这个过程中的某个地方，传递到registerUser中的密码消失了(请参阅注释(。我不知道这个问题可能来自哪里，我们非常感谢您的帮助！
function Register() {
const { auth, dispatchAuth } = useContext(AuthContext);
const { dispatchErrors } = useContext(ErrorContext);
const { dispatchMessages } = useContext(MessageContext);
const [username, setUsername] = useInputState("");
const [email, setEmail] = useInputState("");
const [password1, setPassword1] = useInputState("");
const [password2, setPassword2] = useInputState("");
const registerUser = ({ username, password, email }) => {
// headers
const config = {
headers: {
"Content-Type": "application/json",
},
};
// Request body
const body = JSON.stringify({
username,
password,
email,
});
console.log("body:");
console.log(body);
// Output looks like: {"username":"testuser","email":"email@test.com"}
// Where did the password go?!
axios
.post("/api/auth/register/", body, config)
.then((res) => {
dispatchAuth({ type: REGISTER_SUCCESS, payload: res.data });
})
.catch((err) => {
dispatchErrors(returnErrors(err.response.data, err.response.status));
dispatchAuth({ type: REGISTER_FAIL });
});
};
const handleSubmit = (e) => {
e.preventDefault();
if (password1 !== password2) {
dispatchMessages(
createMessage({ passwordsNotMatch: "Passwords do not match" })
);
} else {
console.log(password1); // Console output still contains the password
const newUser = { username, password1, email };
registerUser(newUser);
}
};
编辑：好吧，我是个白痴，没有注意到我需要将const newUser = { username, password1, email };更改为const newUser = { username, password, email };
好吧，我是个白痴，没有注意到我需要将const newUser = { username, password1, email };更改为常量newUser = { username, password, email };