React DOM中无法调用方法：render内列表项点击触发projectDetails报错

嘿，这个问题我之前也碰到过，大概率是this上下文没绑定对搞的鬼！你说错误提示关联到render里的constructor，其实核心原因是当你在render()里生成listItems列表行时，点击触发的projectDetails方法里的this没有指向组件实例，导致调用时出错。

给你几个靠谱的解决方案，挑适合你的来：

方案1：在constructor里手动绑定this #

这是最经典的做法，在组件初始化时就把方法的this绑定到组件实例上：

constructor(props) {
  super(props);
  // 关键：把projectDetails的this绑定到当前组件实例
  this.projectDetails = this.projectDetails.bind(this);
}

之后在render里的列表行直接用就行：

const listItems = this.props.projects.map(project => (
  <tr key={project.id} onClick={this.projectDetails}>
    {/* 你的行内容，比如project名称、ID之类的 */}
  </tr>
));

方案2：用箭头函数定义projectDetails方法 #

箭头函数会自动继承外层作用域的this，所以直接把方法写成箭头函数形式，省得手动绑定：

// 注意：这种写法需要你的项目支持类字段语法（大部分现代React项目都支持）
projectDetails = () => {
  // 这里的this就自动指向组件实例了，放心用this.props/this.state
  console.log("点击了项目行");
  // 你的业务逻辑代码
}

然后render里的onClick直接用this.projectDetails就好，不用额外操作。

方案3：在render的onClick里用箭头函数包裹 #

这种方式最灵活，尤其是需要给projectDetails传参数的时候（比如当前点击的project ID），缺点是每次render都会生成新的函数实例，小项目完全没问题：

const listItems = this.props.projects.map(project => (
  <tr key={project.id} onClick={() => this.projectDetails(project.id)}>
    {/* 行内容 */}
  </tr>
));

这样点击时不仅能触发方法，还能把当前项目的ID传进去，非常方便。

额外排查小提示 #

如果以上方法都没解决，你可以看看错误提示的具体内容——如果是类似Cannot read property 'props' of undefined，那100%是this的绑定问题。另外，确认下projectDetails方法里有没有用到this.props或者this.state，这些都依赖正确的this上下文。

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