如何防止javascript中数组的重新初始化

我正在设计一个系统。它有一个仪表板，在那里发布我的表单数据，一旦发布到那里，就会使用amazon ses发送一封自动电子邮件。我希望防止用户多次将其数据发布到我的仪表板。这就是我想为上述任务添加验证的原因。我在考虑一个可以存储电子邮件的阵列，如果电子邮件存在，axios将不会将数据发布到仪表板，如果电子邮件不存在，它将添加到阵列中并发布数据，但每次发布新表单数据时，阵列都会重新初始化。我想要一个解决这个问题的办法

import React, { Fragment, useState } from "react";
import axios from "axios";

const Form = () => {
  const [candidate, setCandidate] = useState({
    fullName: "",
    phoneNumber: 0,
    email: "",
    gitProfile: "",
    linkToResume: "",
    designation: "",
    interest: "",
  });

  let emails = [];

  const onChange = e =>
    setCandidate({ ...candidate, [e.target.name]: e.target.value });

  const onSubmit = e => {
    e.preventDefault();

    if (emails.includes(candidate.email) === false) {
      emails.push = candidate.email;
      axios
        .post("https://webhook.site/f5698dc8-5eec-42db-860b-52ce8f7a347d", {
          candidate,
        })
        .then(res => {
          console.log(res, candidate);
          if (res.status === 200) {
            axios
              .post("http://localhost:5000/", { candidate })
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    } else {
      alert("User Exists");
    }
  };

return(
    //form input data 
  );
}

---

在这里，每当我提交新数据时，数组

电子邮件[]

总是在重新初始化并破坏目的。请推荐解决此问题的方法。

使用

React.useRef

hook创建ref对象并将电子邮件推送到该对象上

import React, { Fragment, useState } from "react";
import axios from "axios";

const Form = () => {
  const [candidate, setCandidate] = useState({
    fullName: "",
    phoneNumber: 0,
    email: "",
    gitProfile: "",
    linkToResume: "",
    designation: "",
    interest: "",
  });

  let emails = [];

  const onChange = e =>
    setCandidate({ ...candidate, [e.target.name]: e.target.value });

  const onSubmit = e => {
    e.preventDefault();

    if (emails.includes(candidate.email) === false) {
      emails.push = candidate.email;
      axios
        .post("https://webhook.site/f5698dc8-5eec-42db-860b-52ce8f7a347d", {
          candidate,
        })
        .then(res => {
          console.log(res, candidate);
          if (res.status === 200) {
            axios
              .post("http://localhost:5000/", { candidate })
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    } else {
      alert("User Exists");
    }
  };

return(
    //form input data 
  );
}

从

useRef

创建的ref在重新渲染和状态更改过程中保持不变

您可以在此处阅读有关

useRef

的更多信息->

---

你可以通过移动来实现这一点

let emails = [];

---

组件外部。

此处需要的功能是

useRef

。它允许您存储不会在每次渲染时重置的可变值：如果它们执行刷新页面之类的操作，这显然不会保留这些值，但这是为页面刷新保留的一个单独的matterhow？您需要将电子邮件数组保存到本地/会话存储。然后，在

useRef

的初始值中，检查它是否在存储器中并使用它，否则只需使用一个空数组，因为这个答案对我有效。我知道这在服务器重新启动时不起作用，但在页面刷新时是否也能起作用。您必须将其存储在

localStorage

中。但同样，当同一用户从另一台设备输入电子邮件时会发生什么？然后，您必须将其存储在后端的电子邮件中。根据您的使用情况，您可以将电子邮件存储在本地存储或服务器中。这也可以，但一旦页面刷新，阵列将重新初始化。在这种情况下，即使您使用

state

，阵列也将始终重新初始化。如果您希望电子邮件变量的值在刷新后保持不变，则应使用本地存储。