React类组件render后调用函数时构造函数内state未定义报错

数据老陈

2026-8-29

错误根因

类组件的自定义方法默认不会自动绑定组件实例的this上下文：

React 内部调用生命周期、render 方法时，已经默认绑定了组件实例作为this，所以这两个位置读取this.state、this.props都能正常运行
你在 JSX 里直接把this.buttonHandler传给onClick事件时，事件触发时方法内部的this会丢失，变成undefined，此时读取this.state自然会抛出Cannot read properties of undefined的错误

另外你的代码里有一处冗余的错误导入：import { setState } from 'react'，setState是React组件实例自带的方法，不需要单独从react包导入，这行代码可以直接删除。

修复方案

你可以任选以下一种方案修复this指向问题：

方案1：在构造函数中手动绑定方法的this
在constructor内新增一行绑定代码，强制把方法的this指向组件实例：

constructor(props) {
    super(props)
    this.s2 = 0

    this.state = {
       s1: this.props.p1
    }
    // 新增绑定逻辑
    this.buttonHandler = this.buttonHandler.bind(this)
    console.log(this.state.s1);
}

方案2：使用类字段+箭头函数定义事件方法（推荐）
箭头函数不会生成自身的this，会直接继承外层类实例的this上下文，不需要额外写bind逻辑，是类组件事件处理的主流写法：
```
// 直接把方法改成箭头函数形式
buttonHandler = () => {
    console.log(this.state.s1);
}
```
方案3：在onClick绑定处用箭头函数包裹
这种写法会在每次组件render时生成新的函数引用，如果该方法要作为props传给深层子组件，可能触发不必要的重渲染，仅适合简单场景使用：
```
<button onClick={() => this.buttonHandler()}>Push</button>
```