React中使用for-in循环遍历对象时报state未定义错误如何解决

你遇到的TypeError: Cannot read properties of undefined (reading 'state')报错，核心原因是类方法Club的this指向丢失：当你直接将this.Club作为回调传递给onClick时，方法触发时内部的this不会指向当前组件实例，此时this为undefined，读取this.state自然抛出错误。

有三种常用修复方式，任选其一即可：

• 方案1：将类方法改为箭头函数（最常用）
  箭头函数会继承外层作用域的this，自动绑定到组件实例，不需要额外手动绑定：

// 修改Club方法的定义为箭头函数
Club = () => {
  for(const property in this.state.posts) {
    console.log('hello')
    // console.log(`${property}: ${this.state.posts[property]}`);
  }
}

• 方案2：在绑定onClick时用箭头函数包裹调用
  触发回调时主动通过实例调用方法，保证this指向正确：

<button onClick={() => this.Club()}> Click Club </button>

• 方案3：在类构造函数中手动绑定this

class App extends Component {
  constructor(props) {
    super(props);
    this.Club = this.Club.bind(this);
  }

  // 原有state、Club方法、render方法保持不变
}

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