容器组件中作为回调传递的函数未触发问题

碰到类组件里回调传出去没触发的情况太常见了，我结合你给出的newPeriodeCallback代码片段，梳理几个最可能的原因和解决办法：

1. 先搞定this绑定问题（最常见！） #

在React类组件里，普通方法默认不会绑定this，如果你直接把this.newPeriodeCallback传给子组件，调用的时候this会变成undefined，函数自然没法正常执行。

解决办法选一个就行：

• 用箭头函数定义方法：直接把函数改成箭头函数，自动绑定当前组件的this

newPeriodeCallback = () => {
  const { behandlingFormPrefix, perioder, periodeTyper, utsettelseArsaker } = this.props;
  const { uttakNyPeriodeFom, uttakNyPeriodeTom, uttakNyPeriodeType, uttakNyPeriodeAndel, uttakNyPeriodeArsak } = this.props.nyPeriode;
  
  const getPeriodeData = (periode, periodeArray) => periodeArray
    .filter(({ kode }) => kode === periode);
  
  const periodeObjekt = getPeriodeData(uttakNyPeriodeType, periodeTyper);
  // 后续代码...
}

• 在constructor里手动绑定：

constructor(props) {
  super(props);
  this.newPeriodeCallback = this.newPeriodeCallback.bind(this);
}

• 传递时用箭头函数包裹：如果不想改方法定义，在传给子组件的时候用箭头函数套一层

<ChildComponent onNewPeriode={() => this.newPeriodeCallback()} />

2. 检查回调的传递路径是否正确 #

• 确认父组件传递回调时的props名称和子组件期望的一致：比如子组件要的是onSubmit，你别传成newPeriodeCallback，名字错了肯定触发不了。
• 如果是多层组件传递（父→子→孙），要确保每一层都把回调正确传下去，别在中间组件里弄丢了。

3. 看看子组件的事件绑定有没有写错 #

子组件里触发回调的事件名要符合React的规范，比如是onClick（大写C）不是onclick（全小写），表单提交是onSubmit不是onsubmit。举个错误示例：

// 错误写法，不会触发
<button onclick={this.props.onNewPeriode}>新增周期</button>

改成正确的：

// 正确写法
<button onClick={this.props.onNewPeriode}>新增周期</button>

4. 排查函数内部是否有报错中断执行 #

有时候函数其实执行了，但中途报错导致后续代码没跑，看起来像没触发。你可以在newPeriodeCallback开头加个console.log('回调触发啦！')，打开浏览器控制台看看：

• 如果有这个日志，说明函数已经执行，那问题出在内部代码（比如getPeriodeData里的periodeArray是undefined，调用filter报错），这时候要给代码加保护：

const getPeriodeData = (periode, periodeArray) => {
  // 先判断数组是否存在，避免报错
  if (!periodeArray) return [];
  return periodeArray.filter(({ kode }) => kode === periode);
}

• 如果没有日志，那就是回调根本没被调用，回到前面的绑定和传递问题排查。

5. 确认props数据是否正确 #

函数里用到的this.props.nyPeriode、periodeTyper这些值，有没有可能是undefined或者不是你期望的格式？可以在函数开头打印console.log(this.props)，检查数据是否正确，避免因为数据异常导致逻辑走不下去。

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