React父组件方法作为props传入子组件调用时出现setState未定义报错

问题根源 #

核心是父组件的handleEmail方法作为props传递给子组件时，丢失了父组件实例的this绑定，导致执行this.setState时this指向undefined，触发报错。
你在父组件内部调用时正常，说明父组件内部的调用场景已经做了this绑定（比如constructor绑定、调用时用箭头函数包裹），但传递到子组件时没有保留绑定。

修复方案 #

你可以任选以下任意一种方案修复：

方案1：父组件constructor内手动绑定（性能最优） #

在父组件的构造函数中提前给handleEmail绑定当前组件实例的this：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      viewDisabled: ''
    };
    // 新增this绑定
    this.handleEmail = this.handleEmail.bind(this);
  }

  handleEmail() {
    console.log('handle email triggered');
    this.setState({
      viewDisabled: 'hide',
    });
  }
}

方案2：将方法改为类属性箭头函数（最简洁） #

箭头函数的this在定义时就固定绑定到当前组件实例，不会随调用场景变化：

// 把原来的普通函数写法改为箭头函数
handleEmail = () => {
  console.log('handle email triggered');
  this.setState({
    viewDisabled: 'hide',
  });
}

方案3：传递props时用箭头函数包裹（最易用，适合临时测试） #

传递方法时用箭头函数包裹一层，确保调用时this指向父组件实例：

<Email handleEmail={() => this.handleEmail()} onChange={emailHandler} />

注意：该方案每次父组件渲染都会生成新的函数实例，有极轻微的性能损耗，复杂组件不推荐长期使用。

额外优化建议 #

你当前把handleEmail绑定在提交按钮的onClick事件上，当用户按下回车触发表单提交时，不会触发按钮的点击事件，导致逻辑漏执行。建议把调用逻辑移到子组件的handleSubmit方法内：

// 子组件内的handleSubmit方法
handleSubmit = (e) => {
  e.preventDefault();
  // 先执行你的表单校验、取值逻辑
  this.props.handleEmail();
}

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