React运行报错TypeError: Cannot read property 'bind' of undefined如何解决

• 1. sort 函数定义位置错误：你把sort写在了render方法内部，属于render的局部函数，不是PatientTable类的实例方法，所以访问this.sort的时候是undefined，调用bind方法自然触发Cannot read property 'bind' of undefined报错。
• 2. 状态管理错误：你没有把要渲染的表格数据存在组件state里，直接修改导入的原始data不会触发React组件重渲染，而且Array.sort是原地排序方法，会直接修改原数组，不符合React不可变数据规范。
• 3. 点击事件写法错误：onClick={() => this.sort.bind(this)} 只是返回了一个绑定后的函数，并没有执行排序逻辑，事件触发后不会有任何效果。
• 4. 拼写问题：类名、caption里的Paient均为拼写错误，正确应为Patient，不属于核心报错点但建议修正避免后续混淆。

import React from 'react';
import originalData from './data.json'; 
// 如果你开发的是React Native项目，不能直接使用table、button等HTML标签，需要替换为React Native对应组件
// import {Button, View} from 'react-native';

export default function App() {
  return (
    <PatientTable/>
  );
}

class PatientTable extends React.Component { 
  constructor(props) {
    super(props);
    // 把原始数据存在state里，后续排序修改state触发重渲染
    this.state = { 
      tableData: originalData 
    };
    // 绑定方法this指向
    this.sortByLastName = this.sortByLastName.bind(this);
  }

  // 排序方法移到类的顶层作为实例方法
  sortByLastName() {
    // 先拷贝原数组，避免修改原始数据
    const sortedData = [...this.state.tableData].sort((a, b) => {
      if (a.lName < b.lName) return -1;
      if (a.lName > b.lName) return 1;
      return 0;
    });
    // 更新state触发重渲染
    this.setState({ tableData: sortedData });
  }
    
  render() {
    return (
      <table>
        <caption>Patients</caption>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>
              <button type="button" onClick={this.sortByLastName}> 
                Last Name
              </button>
            </th>
          </tr>
        </thead>
        <tbody>
          {/* 渲染state里的table数据，不是原始导入的data，添加唯一key避免列表渲染警告 */}
          {this.state.tableData.map(patient => (
            <tr key={patient.id}>
              <td>{patient.id}</td>
              <td>{patient.fName}</td>
              <td>{patient.lName}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

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