TypeError: email.indexOf is not a function in React using react-mailchimp-subscribe

Question

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

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

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 a function error on handleSubmit。猜猜isuse是什么？请帮忙

Answer 1

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

这样可以对多个状态调用进行批处理。

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next 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')

TypeError: email.indexOf is not a function in React using react-mailchimp-subscribe

TypeError: email.indexOf is not a function in React using react-mailchimp-subscribe

reactjs

react-hooks

mailchimp

use-state