ReactJS对接Mailchimp订阅表单报错求助：未定义变量问题

报错1：Uncaught ReferenceError: handleOnChangeEmail is not defined #

问题原因：类组件中调用自身方法必须加this.前缀，直接写handleOnChangeEmail会被当成全局变量，自然找不到。
修复方法：修改输入框的onChange事件绑定：

// 原代码
onChange={({ target }) => handleOnChangeEmail(target.value)}

// 修改后
onChange={({ target }) => this.handleOnChangeEmail(target.value)}

报错2：Uncaught ReferenceError: email is not defined #

问题原因：点击事件里的email变量未定义，需要从组件状态中获取输入的邮箱值。
修复方法：修改按钮的onClick事件：

// 原代码
onClick={() => handleSendEmail(email)}

// 修改后
onClick={() => this.handleSendEmail(this.state.email)}

额外优化建议 #

1. 修正按钮类型：把按钮的type="subscribe"改成标准的type="submit"，同时在表单上绑定onSubmit事件并阻止默认行为，避免页面刷新：

<form
  className="formElem"
  onSubmit={(e) => {
    e.preventDefault();
    this.handleSendEmail(this.state.email);
  }}
>

之后按钮的onClick可以直接移除，靠表单提交触发逻辑更规范。

2. 初始化所有状态字段：在constructor里补充初始化success、error、chimpError，避免渲染时出现undefined：

this.state = {
  email: '',
  loading: false,
  success: '',
  error: '',
  chimpError: ''
}

3. 修正PropTypes拼写：类的PropTypes属性是小写开头的propTypes，你写的FormComp.PropTypes不会生效，修改为：

FormComp.propTypes = {
  email: PropTypes.string,
  handleOnChangeEmail: PropTypes.func,
  handleSendEmail: PropTypes.func
}

修复完以上问题后，表单即可正常运行，你可以继续测试server.js中的Mailchimp配置。

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