未捕获的类型错误：无法读取 React 中未定义的属性“匹配”答案

【问题标题】：Uncaught TypeError: Cannot read property 'match' of undefined in React未捕获的类型错误：无法读取 React 中未定义的属性“匹配”
【发布时间】：2021-08-16 01:55:11
【问题描述】：

我正在尝试制作一个简单的提交表单。我相信我的邮件格式的 json 是正确的。使用mailformat中的json，我正在尝试检查已提交的电子邮件是否有效。但是由于某种原因，react 似乎没有识别 match() 方法。我收到一条错误消息，指出“无法读取未定义的属性‘匹配’。”我对修复的猜测是涉及异步编程，但我不够熟练，无法提出修复。我正在使用反应钩子和状态。

function Form({submit, setSubmit, text, setText}) {
    let emailArray = [];

    //handlers. Need for submit button and input for text
    const setTextHandler = (e) => { 
        // console.log(e.target.value)
        
        setText(e.target.value);
    };

    const setSubmitHandler = (e) => {
        let mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        e.preventDefault();

        setSubmit(text);
        console.log(text)

        if(text.value.match(mailformat)) {
            console.log("it works")
            emailArray.push(text);
            return true
        } else if (!text.value.match(mailformat)) {
            console.log("FAIL");
            return false
        }
        
        console.log(emailArray[0])
        console.log(emailArray)
        setText("");
    }

【问题讨论】：

关于您的“邮件格式”的注释：它不再是 1992 年了，现在有效的电子邮件几乎是“它只有一个 @ 吗？酷，这是一个有效的电子邮件地址"
您必须使用text.match，因为您将输入直接存储在e.target.value 中。而不是匹配，您可以使用RegExp.test 方法

标签： javascript reactjs react-hooks

【解决方案1】：

根据您的最后一行和您的 setTextHandler，两个 setText 函数都将文本值设置为字符串，因此只需更改此行即可：

if(text.match(mailformat)) {
  // your code
} else if (!text.match(mailformat)) {
  // your code
}

【讨论】：