React函数组件传递方法作为props回调触发TypeError错误求助

兄弟，这个错误我简直见太多了——本质就是方法调用时this的指向没绑定到组件实例上，导致找不到setAnswered方法。我帮你对照官方井字棋的实现，梳理下几个关键排查点：

先回忆官方井字棋的绑定逻辑 #

官方示例里处理这类点击事件，常用这几种绑定方式，你可以逐一对照自己的代码：

1. 构造函数内手动绑定（最常用） #

井字棋的类组件里，会在构造函数里给事件处理方法绑定this，比如：

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

如果你是用类组件写的，先检查有没有在构造函数里给setAnswered做bind(this)操作。要是没绑定，点击时this就会变成undefined（React严格模式下默认行为），自然找不到这个方法。

2. 用箭头函数定义方法（简化写法） #

现在很多React项目会直接把实例方法写成箭头函数，这样this会自动绑定到组件实例，不用手动bind：

setAnswered = () => {
  // 你的方法逻辑
}

这种写法官方示例里也有出现过，如果你用了这种方式，就不用额外处理绑定了。

3. onClick里直接用箭头函数包裹（应急写法） #

如果上面两种都没做，也可以在onClick里直接用箭头函数包裹调用：

<li onClick={() => this.setAnswered()}>...</li>

不过要注意，这种方式每次组件渲染都会创建新的函数实例，小组件里影响不大，但大型组件可能会有性能损耗，官方更推荐前两种。

再看你的Choice组件写法 #

你贴的Choice是函数组件，但setAnswered看起来像是类组件的实例方法？这里可能踩了个坑：函数组件本身没有实例，不能用this.setAnswered！

就像井字棋里的Square组件（函数组件），它是通过props接收父组件传过来的handleClick方法的：

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

如果你的Choice是函数组件，正确的做法应该是让父组件把setAnswered作为props传进来，然后在onClick里调用props.setAnswered()，而不是用this。

最后给你个排查步骤清单 #

1. 先确定组件类型：是类组件还是函数组件？
   • 类组件：检查setAnswered是否做了this绑定（构造函数bind或者箭头函数定义）；
   • 函数组件：检查是否通过props接收了父组件的setAnswered，调用时用props.setAnswered()；
2. 对照井字棋的子组件传参方式，看是不是在传递方法时漏了绑定或者传错了；
3. 如果还是找不到差异，把Choice组件的完整代码和父组件里调用它的部分贴出来，就能更快定位问题了。

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