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

【问题标题】：TypeError: email.indexOf is not a function in React using react-mailchimp-subscribeTypeError: email.indexOf 不是 React 中使用 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”，您可能会在不同的属性中找到所需的值

标签： reactjs react-hooks mailchimp use-state

【解决方案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')

【讨论】：