在我收集的电子邮件忘记密码文件中,我必须发送恢复链接。我得到了电子邮件作为输入,并执行console.log显示我得到的电子邮件。接下来,我派遣了电子邮件,并发送电子邮件到后端生成恢复链接,但在后端它显示,链接是未定义的,我不知道也不能找出背后的原因。如果有人能帮助我,我将非常感激。
这是forgotpasswordreducer
export const forgotPasswordReducer = (state={},action) => {
switch(action.type){
case FORGOT_PASSWORD_REQUEST:
case RESET_PASSWORD_REQUEST:
return {
loading:true,
...state,
error:null,
}
case FORGOT_PASSWORD_SUCCESS:
return{
...state,
loading:false,
message:action.payload,
};
case RESET_PASSWORD_SUCCESS:
return {
...state,
loading:false,
success:action.payload,
};
case FORGOT_PASSWORD_FAIL:
case RESET_PASSWORD_FAIL:
return{
...state,
loading:false,
error:action.payload,
};
case CLEAR_ERRORS:
return {
...state,
error:null,
}
default:
return state;
}
}
这是forgotpassword操作
export const forgotPassword = (email) => async(dispatch) => {
try{
dispatch({
type:FORGOT_PASSWORD_REQUEST,
})
const config = {
headers:{
"Content-Type":"application/json"
}
}
const {data} = await axios.post(`/api/v1/password/forgot`,email,config);
dispatch({
type:FORGOT_PASSWORD_SUCCESS,
payload:data.message,
})
}
catch(error){
dispatch({
type:FORGOT_PASSWORD_FAIL,
payload:error.response.data.message,
})
}
}
这是我从用户那里输入电子邮件的文件
import React, { Fragment , useState, useEffect} from 'react'
import "./ForgotPassword.css";
import MailOutLineIcon from "@material-ui/icons/MailOutline";
import MetaData from "../layout/MetaData";
import Loader from "../layout/Loader/Loader.js";
import {useDispatch,useSelector} from "react-redux";
import {useAlert} from "react-alert";
import {clearErrors,forgotPassword} from "../../actions/userActions";
const ForgotPassword = () => {
const dispatch = useDispatch();
const alert = useAlert();
const {error,message,loading} = useSelector((state)=>state.forgotPassword);
const [email,setEmail] = useState("");
const forgotPasswordSubmit = (e) => {
e.preventDefault();
const myForm = new FormData();
myForm.set("email",email);
dispatch(forgotPassword(myForm));
};
useEffect(()=>{
if(error){
alert.error(error);
dispatch(clearErrors());
}
if(message){
alert.success(message);
}
},[dispatch,error,alert,message]);
return (
<Fragment>
{loading?(
<Loader/>
):
(
<Fragment>
<MetaData title="Forgot Password"/>
<div className="forgotPasswordContainer">
<div className="forgotPasswordBox">
<h2 className="forgotPasswordHeading">Forgot Password</h2>
<form className="forgotPasswordForm" onSubmit={forgotPasswordSubmit}>
<div className="forgotPasswordSubmit">
<MailOutLineIcon/>
<input type="email" placeholder="Email" required name="email" value={email} onChange={(e)=>setEmail(e.target.value)}/>
</div>
<input type="submit"
value="Send"
className="forgotPasswordBtn"/>
</form>
</div>
</div>
</Fragment>) }
</Fragment>
)
}
export default ForgotPassword;
这是后端的userController文件
在这里,当我尝试console.log的req.body.email我得到未定义。
exports.forgotPassword = catchAsyncErrors(async(req,res,next)=>{
console.log(req.body.email);
const user = await User.findOne({email:req.body.email});
if(!user){
return next(new ErrorHandler("User not found",404));
}
// get reset password token
const resetToken = user.getResetPasswordToken();
// saving the user to save the token of the user that was generated
await user.save({validateBeforeSave:false});
const resetPasswordUrl = `${req.protocol}://${req.get('host')}/api/v1/password/reset/${resetToken}`
const message = `Your password reset token is :- \n\n ${resetPasswordUrl} \n\n If you have not requested this email then please ignore it.`;
try{
await sendEmail({
email:user.email,
subject:`Ecommerce Password Recovery`,
message,
});
res.status(200).json({
success:true,
message:`Email was sent to ${user.email} successfully`,
});
}
catch(error){
// if their is some kind of error we would remove the token that was generated and also
// make the expire time of the token to be the current time.
user.resetPasswordToken = undefined;
user.resetPasswordExpire = undefined;
await user.save({validateBeforeSave:false});
return next(new ErrorHandler(error.message,500));
}
});
有人能帮我弄清楚为什么会这样吗。如果更多的代码片段或文件是解决错误所需的,请让我知道我会附上他们以及。
试图弄清楚为什么在react-redux中从表单中获取输入后数据没有被传递。它显示作为输入的电子邮件是未定义的,我不能找出它背后的原因。
1条答案
按热度按时间sxissh061#
您正在将表单数据传递给
forgotPassword
操作,该操作通过axios
发出POST请求。但是对于axios
,您已经指定要传递JSON数据。您可以使用
"Content-Type": "multipart/form-data"
发送表单数据,但后端也需要配置为接收这种类型的请求主体。这听起来像你的后端,它只是期待JSON数据。不需要传递
FormData
对象,你可以传递一个JavaScript对象,让axios
处理JSON字符串化的body payload。