TypeError: email.indexOf 不是 React 中使用 react-mailchimp-subscribe 的函数

Posted 2023-03-24

【中文标题】TypeError: email.indexOf 不是 React 中使用 react-mailchimp-subscribe 的函数

【英文标题】：TypeError: email.indexOf is not a function in React using react-mailchimp-subscribe

【发布时间】：2021-11-28 16:34:49

【问题描述】：

我面临一个奇怪的情况，但无法弄清楚问题到底是什么。

我使用下面的代码创建了一个新的自定义表单

const CustomForm = ( status, message, onValidated ) => 

    const [email, setEmail] = useState('')
    const [customErr, setCustomErr] = useState(false);
    const handleSubmit = (e) => 
        e.preventDefault();
        setEmail(e.currentTarget.email.value)
        console.log(email.length)
        if(email.length === 0) 
            setCustomErr(true);
            return;
        
        setCustomErr(false);
        email &&
        email.indexOf("@") > -1 &&
        onValidated(
            EMAIL: email,
        );

    
    return (
<form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" onSubmit=(e) => handleSubmit(e) className="validate">
                        <div id="mc_embed_signup_scroll" className="form-inner">
                            <div className="mc-field-group">
                                <div className="form-group">
                                    <input type="email" name="email" onChange=setEmail className="form-control required email" id="mce-EMAIL" placeholder="Email"/>
                                </div>
                                customErr && (
                                    <div htmlFor="mce-EMAIL" className="mce_inline_error">This field is required.</div>
                                )
                            </div>
                            <div className="form-group">
                                <button type="submit" name="subscribe" id="mc-embedded-subscribe" className="btn">Subscribe</button>
                            </div>
                            <div id="mce-responses" className="form-group-messages">
                            status === "sending" && (
                            <div className="mc__alert mc__alert--sending">
                                sending...
                            </div>
                            )
                            status === "error" && (
                                <div className="response" id="mce-error-response">message</div>
                            )
                            status === "success" && (
                                <div className="response" id="mce-success-response">message</div>
                            )
                            </div>
                            <div style=position: "absolute", left: "-5000px" aria-hidden="true"></div>
                        </div>
                    </form>
    );
;

由于某种原因，我收到 email.indexOf is not an function error on handleSubmit。猜猜有什么用处？请帮忙

【问题讨论】：

无论 email 是什么...不是字符串...所以尝试 console.log 记录 email 的值。

@JonathanAlfaro 是的，它不是字符串类型。但没有关于错误的线索

错误是因为它不是字符串类型......所以它没有“indexOf”......就这么简单。你没有将正确的东西传递给函数

检查 e.currentTarget... 实际上检查“e”，您可能会在不同的属性中找到所需的值

【参考方案1】：

状态更新不是同步的。这意味着email的值在你执行时不会立即更新：setEmail(e.currentTarget.email.value)

这样就可以批量调用多个状态。

因为 this.props 和 this.state 可能是异步更新的，所以你 不应依赖它们的值来计算下一个状态。

Ref

更新如下：

    const handleSubmit = (e) => 
        e.preventDefault();
        const temp = e.currentTarget.email.value;
        // you may need a guard here like if (typeof temp === 'undefined') ...
        setEmail(temp);
        console.log(temp.length);
        if(temp.length === 0) 
            setCustomErr(true);
            return;
        
        setCustomErr(false);
        if (temp.indexOf('@') > -1) 
           onValidated(
              EMAIL: temp,
           );
        
    

如果e.currentTarget.email.value 可能丢失，您可能还需要一个守卫来检查它的实际值。比如：

if (typeof e.currentTarget.email.value === 'undefined')