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

Question

我正在使用 React JS 创建一个注册页面。我创建了一个表单，它接受用户的所有输入并使用 Axios 将这些数据存储到 JSON 服务器。表单中有一个字段名称作为电子邮件 name= "email" 我想在存储整个表单数据时检查服务器中是否存在此电子邮件 。我正在为此页面使用 react-hook-form。

下面是我在 db.json 文件中的 users 数据。

{
 "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;

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

Answer 1

  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);
        });
      };

Answer 2

您可以完成这些步骤。

首先将您的电子邮件数据保存在一个 state.You 有一个功能组件所以 useState 会很好。
```
const [Email, setEmail] = useState("")
```
设置并保存来自 input.You 的状态值后，可以使用 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() 方法来检查你的 email.If 它是否存在将显示警告，否则提交它。

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);
     });
     }
   };

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

Checking E-Mail existence in the JSON server using React JS

reactjs

axios

react-hook-form