使用react-mailchimp-subscribe时React中出现TypeError: email.indexOf is not a function错误排查求助

这个错误email.indexOf is not a function的核心原因是你的email状态存储的不是字符串，而是一个Event对象，导致调用字符串专属方法indexOf时直接报错。具体有两个关键问题：

1. Input的onChange处理逻辑错误 #

你的input组件写的是：

<input type="email" name="email" onChange={setEmail} className="form-control required email" id="mce-EMAIL" placeholder="Email"/>

onChange事件的回调参数本身是一个Event对象，直接把setEmail传给onChange，相当于把整个Event对象赋值给了email状态，而非输入框的文本值。这就导致email变成了Event对象，自然没有indexOf这类字符串方法。

2. handleSubmit里的异步状态更新陷阱 #

在handleSubmit中，你执行了setEmail(e.currentTarget.email.value)，但React的useState更新是异步的——这意味着紧接着的console.log(email.length)和email.indexOf判断，用的还是更新前的email值（也就是之前存储的Event对象），所以必然触发错误。

我们针对性修正这两个问题，以下是修复后的完整代码：

const CustomForm = ({ status, message, onValidated }) => { 
  const [email, setEmail] = useState('') 
  const [customErr, setCustomErr] = useState(false); 

  const handleSubmit = (e) => { 
    e.preventDefault(); 
    // 直接从表单元素获取最新输入值，无需依赖异步更新的状态
    const inputEmail = e.currentTarget.email.value;
    console.log(inputEmail.length) 
    if(inputEmail.length === 0) { 
      setCustomErr(true); 
      return; 
    } 
    setCustomErr(false); 
    // 使用刚获取的inputEmail，确保是最新的字符串值
    if(inputEmail && inputEmail.indexOf("@") > -1) {
      onValidated({ EMAIL: inputEmail }); 
    }
  } 

  return ( 
    <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" onSubmit={handleSubmit} className="validate"> 
      <div id="mc_embed_signup_scroll" className="form-inner"> 
        <div className="mc-field-group"> 
          <div className="form-group"> 
            {/* 修正onChange：传递输入框的文本值给setEmail */}
            <input 
              type="email" 
              name="email" 
              onChange={(e) => setEmail(e.target.value)} 
              className="form-control required email" 
              id="mce-EMAIL" 
              placeholder="Email"
              value={email} {/* 添加value绑定，转为受控组件，保证状态与UI同步 */}
            /> 
          </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> 
  ); 
};

关键修复点说明： #

• 修正onChange回调：改为(e) => setEmail(e.target.value)，确保email状态始终存储输入框的字符串值。
• 转为受控组件：给input加上value={email}，让状态和UI完全同步，避免出现值不一致的情况。
• 简化提交逻辑：直接从表单元素获取最新输入值，绕开React状态更新的异步特性，同时去掉多余的setEmail调用。

这样就能彻底解决email.indexOf is not a function的错误啦。

内容的提问来源于stack exchange，提问作者Hafiz Siddiq