React JS运行时出现this is undefined报错的问题求助

你在构造函数里给updatePerson做的this绑定是正确的，报错和这个绑定无关。问题出在this.state.persons.map()传入的是普通function声明的匿名回调：普通函数的this由运行时调用上下文决定，这个回调执行时的上下文不是React组件实例，因此回调内部访问this时直接得到undefined——代码在执行map遍历、渲染按钮的阶段就已经触发了this is undefined错误，根本还没到点击按钮触发事件的步骤。
另外你的代码还有两处基础问题：

• Search按钮没有被<td>标签包裹，直接放在<tr>下不符合表格嵌套规则，会导致渲染结构异常
• 所有遍历行设置的key="article-index"是静态固定值，多个列表项重复相同key会导致React渲染diff异常

选任意一种即可：

• 方法1：利用Array.map的第二个参数指定回调的this指向，这个参数会被作为回调执行时的上下文

{this.state.persons.map(function (person) {
  return (
      <tr data-testid="article" key={person.id}>
          <td data-testid="article-firstName" id="personID">{person.id}</td>
          <td data-testid="article-firstName">{person.firstName}</td>
          <td data-testid="article-lastName">{person.lastName}</td>
          <td data-testid="article-lastName">{person.age}</td>
          <td data-testid="article-email">{person.email}</td>
          <td>
            <button className="small" onClick={this.updatePerson}>Search</button>
          </td>
          <td><button className="btn btn-danger small">Delete</button></td>
      </tr>
  )
}, this)} {/* 第二个参数传入组件实例this，绑定回调上下文 */}

• 方法2（实际开发最常用）：将map的回调改为箭头函数，箭头函数没有自身的this，会直接继承外层作用域（也就是组件渲染上下文）的this指向

{this.state.persons.map((person) => {
  return (
      <tr data-testid="article" key={person.id}>
          <td data-testid="article-firstName" id="personID">{person.id}</td>
          <td data-testid="article-firstName">{person.firstName}</td>
          <td data-testid="article-lastName">{person.lastName}</td>
          <td data-testid="article-lastName">{person.age}</td>
          <td data-testid="article-email">{person.email}</td>
          <td>
            <button className="small" onClick={this.updatePerson}>Search</button>
          </td>
          <td><button className="btn btn-danger small">Delete</button></td>
      </tr>
  )
})}

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