React中Uncaught TypeError: Cannot read property 'Clicked' of undefined问题求助

嘿，我来帮你搞定这个报错！这个Uncaught TypeError: Cannot read property 'Clicked' of undefined的问题，本质是this指向不对，或者你的Clicked方法没有正确绑定到组件实例上。咱们一步步来解决：

原因分析 #

这个错误出现的核心原因是：当你尝试调用this.Clicked时，当前上下文里的this并不是你的TableComp组件实例，所以找不到Clicked这个方法，就报了"undefined"的错误。

解决方案 #

1. 确保Clicked方法正确绑定到组件实例 #

你有两种方式可以实现：

• 方式一：在构造函数中手动绑定
  修改你的构造函数，添加一行绑定代码：

  class TableComp extends Component{
    constructor(props){
      super(props)
      this.state={ id:"", name:"", percentage:"", status:"" }
      // 绑定Clicked方法到组件实例
      this.Clicked = this.Clicked.bind(this);
    }
    Clicked(data){
      this.setState({ id:data.id, name:data.name, percentage:data.percentage, status:data.status });
    }
    // ...其他代码
  }
  

• 方式二：用箭头函数定义Clicked方法
  箭头函数会自动绑定当前上下文的this，直接修改方法定义即可：

  class TableComp extends Component{
    constructor(props){
      super(props)
      this.state={ id:"", name:"", percentage:"", status:"" }
    }
    // 用箭头函数定义方法，自动绑定this
    Clicked = (data) => {
      this.setState({ id:data.id, name:data.name, percentage:data.percentage, status:data.status });
    }
    // ...其他代码
  }
  

2. 修复PrintTable中的map回调函数 #

你当前的map使用了普通函数作为回调，这里面的this不是组件实例，所以即使绑定了Clicked，调用时还是会出问题。可以改成这两种方式：

• 方式一：把map的回调改成箭头函数

  PrintTable(){
    return (Data.tasks.map((data,key) => {
      return( <tr key={key} onClick={() => this.Clicked(data)} /> )
    }))
  }
  

• 方式二：在map外部保存组件实例的引用

  PrintTable(){
    const self = this; // 保存组件实例的this
    return (Data.tasks.map(function(data,key){
      return( <tr key={key} onClick={() => self.Clicked(data)} /> )
    }))
  }
  

验证效果 #

完成上面的修改后，当你点击<tr>元素时，this就能正确指向TableComp组件实例，Clicked方法会被正常调用，也就不会再出现那个类型错误啦！

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