Reactjs 使用React JS检查JSON服务器中是否存在电子邮件

我正在使用

React JS

创建注册页面。我创建了一个表单，它接受用户的所有输入，并使用Axios将这些数据存储到JSON服务器。表单中有一个字段名为email

name=“email”

，我想在存储整个表单数据时检查服务器中是否存在此电子邮件。 我正在使用一个

react钩子表单

下面是db.json文件中我的

用户

数据

{
 "users": [
    {
      "id": 1,
      "email": "subro@gmail.com"
    },
    {
      "id": 2,
      "email": "raja@gmail.com"
    }
  ]
}

下面的代码用于将表单数据发布到JSON服务器，并检查电子邮件是否存在但不起作用

function LoginFile() {
  const { register, handleSubmit, errors } = useForm();

  const checkEmail = (getdata) => {
    console.log(getdata);
// need logic for checking email existence if exist stop posting and 
// else post the data to the server 
  };
  const onSubmit = (data) => {
    console.log(data);
    axios
      .get("http://localhost:4000/users")
      .then((res) => checkEmail(res.data));

    axios.post("http://localhost:4000/users", data).then((res) => {
      console.log(res.data);
    });
  };
return (
    <form onSubmit={handleSubmit(onSubmit)}>
      Email <input type="email" name="email" ref={register} />
      {errors.email && "Please enter email"}      
      <input type="submit" />
    </form>
  );
}
export default LoginFile;

函数登录文件（）{
常量{register，handleSubmit，errors}=useForm（）；
const checkEmail=（getdata）=>{
console.log（getdata）；
//需要检查电子邮件是否存在的逻辑（如果存在）停止发布和
//否则将数据发布到服务器
};
const onSubmit=（数据）=>{
控制台日志（数据）；
axios
.get（“http://localhost:4000/users")
。然后（（res）=>检查电子邮件（res.data））；
axios.post（“http://localhost:4000/users，数据）。然后（（res）=>{
console.log（res.data）；
});
};
返回(
电子邮件
{errors.email&&“请输入电子邮件”}
);
}
导出默认登录文件；

---

如何在将电子邮件发送到JSON服务器之前检查电子邮件是否存在？

您可以完成以下步骤

  const checkEmail = (serverUsers,formData) => {
   const user = serverUsers.find(user => user.email === formData.email); // extract the email from the formData
    if (user) return user;
  };
  const onSubmit = async (formData) => {
       
        const user = await axios
          .get("http://localhost:4000/users")
          .then((res) => checkEmail(res.data,formData));

        if (user) alert("email exists");  // do whatever you want here with the existence user store.
        else
         await axios.post("http://localhost:4000/users", data).then((res) => {
          console.log(res.data);
        });
      };

首先将您的电子邮件数据保存在一个状态中。您有一个功能组件，因此useState将很好

const [Email, setEmail] = useState("")

设置并保存来自输入的状态值后，可以使用onChange函数

setEmail(e.target.value);

您可以点击handleSubmit函数，该函数将返回所有用户数据

 const handleSubmit = e => {
       e.preventDefault();
     axios
       .get("http://localhost:4000/users")
       .then((res) => checkEmail(res.data));
   };

现在，在checkEmail函数中，使用JavaScript Array includes（）方法检查您的电子邮件。如果它存在，将显示警报，否则将提交它

const checkEmail = (getdata) => {
     console.log(getdata);
     if(getdata.includes(Email)){
         alert("Cannot post because of duplicate Email")
     }else{
         axios.post("http://localhost:4000/users", data).then((res) => {
         console.log(res.data);
     });
     }
   };

---

欢迎兄弟