useState 和函数 - 盖茨比答案

【问题标题】：useState and function - GatsbyuseState 和函数 - 盖茨比
【发布时间】：2020-10-06 03:37:34
【问题描述】：

我的代码有什么问题？在任何情况下console.log 都是“准备提交的电子邮件”。如何获得errorEmail 状态？

const ContactForm = () => {
  const [errorEmail, setErrorEmail] = useState(false);

  const validateEmail = (data) => {
    const emailString = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (emailString.test(data)) {
      setErrorEmail(false);
    } else {
      setErrorEmail(true);
    }
  }


  const submitForm = (e) => {
    e.preventDefault();
    const formData = e.target;

    validateEmail(formData.email.value);

    if (errorEmail) {
        console.log('email error');
    } else {
        console.log('email ready to submit');
    }
  }

【问题讨论】：

This 可能会有所帮助
setState 是异步的，因此您需要等到它完成后再使用更新。这可能会有所帮助：stackoverflow.com/questions/53898810/…

标签： reactjs

【解决方案1】：

您可能在状态更新之前记录，这是因为状态是异步更新的。

您可以使用useEffect 钩子并检查其中的修改状态：

useEffect(() => {
    if (errorEmail) {
        console.log('email error');
    } else {
        console.log('email ready to submit');
    }
}, [errorEmail])

const submitForm = (e) => {
    e.preventDefault();
    const formData = e.target;

    validateEmail(formData.email.value);

    // if (errorEmail) {
    //     console.log('email error');
    // } else {
    //     console.log('email ready to submit');
    // }
}

【讨论】：