使用react-mailchimp-subscribe触发onValidated is not a function错误

直接原因及修复 #

你父组件MailchimpFormContainer里使用了CustomForm，但没有导入这个子组件，导致React无法识别你自定义的表单组件，传递的onValidated等props根本没传到目标子组件，子组件中onValidated是undefined，调用时就会触发这个类型错误。

在父组件顶部添加导入语句：

import CustomForm from './CustomForm'; // 路径根据你的文件实际位置调整

其他潜在问题修复 #

1. MailChimp请求URL格式错误
   你的postURL里参数分隔符用了$id=，正确的URL参数分隔符应该是&，修改为：

const postURL = `https://*li$%.list-manage.com/subscribe/post?u=${process.env.REACT_APP_MAILCHIMP_U}&id=${process.env.REACT_APP_MAILCHIMP_ID}`;

2. 表单提交逻辑优化
   子组件handleSubmit里的链式判断可以改成更清晰的if语句，便于后续维护：

const handleSubmit = (e) => {
  console.log('handlesubmit triggered')
  e.preventDefault();
  if (email && fullName && email.includes('@')) {
    onValidated({
      EMAIL: email,
      MERGE1: fullName,
    });
  }
}

验证修复效果 #

完成上述修改后，重新运行项目，提交表单时就能正确触发onValidated函数，将数据传递给MailChimp的订阅接口。

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