如何确认密码以更改密码并在 api 中发布？

Question

我有 api URL: X/profile/password 以旧密码和新密码作为请求正文，现在我需要使用它来允许用户更改密码，但我不知道如何确认新密码这是我的代码反应：

export default function UserProfile() {
const classes = useStyles();
const [user, setUser] = useState({
old_password: "",
new_password: "",
});

const updatePass = (event) => {
setUser({ ...user, [event.target.name]: event.target.value });
};

const submitHandler = async (e) => {
e.preventDefault();
try {
  console.log(user);
  const resp = await Axios({
    method: "POST",
    url: `http://localhost:3001/api/profile/password`,
    headers: {
      "Content-Type": "application/json",
    },
    data: user,
  });
  console.log(resp);
} catch (error) {
  console.log(error.message);
}
};
 const [mail, setMail] = useState({
 new_email: "",
 });

 const updateMail = (event) => {
 setMail({ ...mail, [event.target.name]: event.target.value });
 };

 const submitHandler2 = async (e) => {
 e.preventDefault();
try {
  console.log(user);
  const resp = await Axios({
    method: "POST",
    url: `http://localhost:3001/api/profile/email`,
    headers: {
      "Content-Type": "application/json",
    },
    data: mail,
  });
  console.log(resp);
  } catch (error) {
  console.log(error.message);
 }
 };

return (
<div>
  <GridContainer>
    <GridItem xs={12} sm={12} md={12}>
      <Card>
        <CardHeader color="primary">
          <h4 className={classes.cardTitleWhite}>Edit Email</h4>
          <p className={classes.cardCategoryWhite}>
            Update your current email address
          </p>
        </CardHeader>
        <CardBody>
        <form className={classes.form} noValidate onSubmit={submitHandler2}>
          <GridContainer>
            <GridItem xs={12} sm={12} md={4}>
            <TextField
                label="Email address"
                id="new_email"
                fullWidth
                  required
                  name="new_email"
                  autoComplete="new_email"
                  autoFocus
                  onChange={updateMail}
                
              />
            </GridItem>
          </GridContainer>
          </form>
        </CardBody>
        <CardFooter>
          <Button color="primary"
          type="submit"
          variant="contained"
          className={classes.submit}>Update Email</Button>
        </CardFooter>
      </Card>
    </GridItem>
    <GridItem xs={12} sm={12} md={12}>
    <form className={classes.form} noValidate onSubmit={submitHandler}>
      <Card>
        <CardHeader color="primary">
          <h4 className={classes.cardTitleWhite}>Edit Password</h4>
          <p className={classes.cardCategoryWhite}>Update your Password</p>
        </CardHeader>
        <CardBody>
          <GridContainer>
            <GridItem xs={12} sm={12} md={4}>
              <TextField
                id="old_password"
                label="Old Password"
                type="password"
                name="old_password"
                autoComplete="old_password"
                required
                autoFocus
                onChange={updatePass}
              />
            </GridItem>
          </GridContainer>
          <GridContainer>
            <GridItem xs={12} sm={12} md={4}>
              <TextField
                id="new_password"
                label="New Password"
                required
                type="password"
              />
            </GridItem>
            <GridItem xs={12} sm={12} md={4}>
              <TextField
                id="new-password-2"
                label="Confirm Password"
                required
                type="password"
              />
            </GridItem>
          </GridContainer>
        </CardBody>
        <CardFooter>
          <Button type="submit"
          variant="contained"
          color="primary"
          className={classes.submit}>Update Password</Button>
        </CardFooter>
      </Card>
      </form>
    </GridItem>
    </GridContainer>
    </div>
    );
     }

这是包含更改电子邮件和更改密码的代码，可以吗？以及如何确认密码，即密码不匹配时禁用提交，并显示密码不匹配的消息。

Answer 1

您可以将您的用户状态更新为：const [user, setUser] = useState({ old_password: "", new_password: "", new-password-2: "" });

如果它们相同，则简单地检查处理程序，然后使用 useState 钩子生成错误状态。

const [error, setError] = useState({message: "", isError: false}) 
const submitHandler = async (e) => {
e.preventDefault();
try {
  console.log(user);
const {new_password, new-password-2, old_password} = user;
setError({message: "", isError: false });
if(new_password === new-password-2){
const resp = await Axios({
    method: "POST",
    url: `http://localhost:3001/api/profile/password`,
    headers: {
      "Content-Type": "application/json",
    },
    data: user,
  });
  console.log(resp);
} catch (error) {
  console.log(error.message);
}
} else {
setError({message: "Incorrect password", isError: true})
}
  
};

现在你有一个错误状态，带有动态消息，并且可以有条件地在你的组件中呈现消息。