React问题：已绑定setSelected方法仍触发Cannot read property 'setSelected' of undefined错误

我太懂这种明明按常规步骤绑定了this，结果报错依旧的挫败感了！除了构造函数绑定this，还有几个容易踩的坑会导致这个问题，咱们逐个排查：

1. 行点击事件的绑定方式有误 #

如果你的表格行是通过map循环渲染的，要是不小心写成了下面这种形式，就会直接触发错误：

{data.map(item => (
  <tr onClick={this.setSelected(item)}>...</tr>
))}

这里的问题是你直接执行了setSelected方法，而不是把它作为点击回调传递，这会导致方法在渲染时就被调用，this的指向完全混乱。

正确的写法有两种：

// 方式1：用箭头函数包裹，传递行数据
{data.map(item => (
  <tr key={item.id} onClick={() => this.setSelected(item)}>...</tr>
))}

// 方式2：把setSelected定义为类箭头函数（推荐，无需手动绑定this）
setSelected = (item) => {
  this.setState({ selectedRow: item });
}

2. 方法定义方式导致this丢失 #

如果setSelected是普通函数定义，哪怕你在构造函数绑了this，但在嵌套函数（比如异步请求的回调）里调用时，还是可能丢失this：

// 错误示例：嵌套函数里的this指向异常
setSelected(item) {
  fetch('/api/getDetail')
    .then(res => res.json())
    .then(data => {
      // 这里的this可能不再是组件实例！
      this.setState({ selectedRow: item });
    })
}

解决办法很简单，直接把setSelected改成类箭头函数，它会自动绑定组件实例的this：

setSelected = (item) => {
  fetch('/api/getDetail')
    .then(res => res.json())
    .then(data => {
      this.setState({ selectedRow: item });
    })
}

3. 忽略了表格行的key属性 #

虽然这不是直接引发this错误的原因，但如果map渲染行时没有添加唯一的key，React的虚拟DOM diff机制可能会导致组件渲染异常，间接触发奇怪的this问题。一定要给每个<tr>加上唯一标识：

{data.map(item => (
  <tr key={item.id} onClick={() => this.setSelected(item)}>
    <td>{item.name}</td>
  </tr>
))}

4. 子组件传递事件时的疏漏 #

如果表格行被拆成了独立子组件，比如<TableRow item={item} onRowClick={this.setSelected} />，要确保子组件正确传递点击事件：

// 子组件TableRow.jsx
const TableRow = ({ item, onRowClick }) => {
  return (
    <tr onClick={() => onRowClick(item)}>
      <td>{item.name}</td>
    </tr>
  )
}

要是子组件里的onClick没有正确触发父组件的方法，或者子组件是类组件但未绑定this，也会导致父组件方法调用时this丢失。

你可以从这几个方向逐一排查，大概率能找到问题根源！

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