redux 数据发送为undefined无法在reactjs中找到原因

lb3vh1jj  于 2023-10-19  发布在  React
关注(0)|答案(1)|浏览(152)

在我收集的电子邮件忘记密码文件中,我必须发送恢复链接。我得到了电子邮件作为输入,并执行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中从表单中获取输入后数据没有被传递。它显示作为输入的电子邮件是未定义的,我不能找出它背后的原因。

sxissh06

sxissh061#

您正在将表单数据传递给forgotPassword操作,该操作通过axios发出POST请求。但是对于axios,您已经指定要传递JSON数据。

const config = {
  headers: {
    "Content-Type": "application/json" // <-- JSON data
  }
};
        
const { data } = await axios.post("/api/v1/password/forgot", email, config);

您可以使用"Content-Type": "multipart/form-data"发送表单数据,但后端也需要配置为接收这种类型的请求主体。
这听起来像你的后端,它只是期待JSON数据。不需要传递FormData对象,你可以传递一个JavaScript对象,让axios处理JSON字符串化的body payload。

export const forgotPassword = (body) => async (dispatch) => {
  try {
    dispatch({ type:FORGOT_PASSWORD_REQUEST });

    const config = {
      headers: {
        "Content-Type": "application/json"
      }
    };
        
    const { data } = await axios.post("/api/v1/password/forgot", body, config);

    dispatch({
      type: FORGOT_PASSWORD_SUCCESS,
      payload: data.message,
    });
  } catch(error) {
    dispatch({
      type: FORGOT_PASSWORD_FAIL,
      payload: error.response.data.message,
    });
  }
};
const forgotPasswordSubmit = (e) => {
  e.preventDefault();
  dispatch(forgotPassword({ email }));
};

相关问题