React解决类组件 this 指向问题

Mr_TJ

于 2021-12-09 20:58:23 发布

阅读量846

点赞数 2

文章标签： react.js javascript

本文链接：https://blog.youkuaiyun.com/Mr_ZCheng/article/details/121843865

版权

本文主要讨论在React类组件中遇到的this指向问题，特别是在点击事件中导致的undefined错误。分析了问题的原因，并提供了五种解决方案：1) 使用高阶函数和柯里化；2) 包裹箭头函数；3) 利用bind；4) 通过赋值添加箭头函数；5) 在构造函数中创建实例方法。每种方法都能有效解决组件中this的指向问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：点击+1按钮，计数器+1

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    count: 0,
  }
  handleClick() {
    //报错： Cannot read properties of undefined (reading 'state')
    console.log(this.state.count)
  }
  render() {
    return (
      <div>
        <h2>计数器：{this.state.count}</h2>
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}

//报错： Cannot read properties of undefined (reading 'state')

分析原因：

render 函数是被组件实例调用的（可以通过修改 render 函数的名字来观察到），因此 render 函数中的 this 指向当前组件实例，所以在 render 函数中通过 this 实例访问 state 和 handleClick 没有问题。
但！<button onClick={this.handleClick}>+1&l

最低0.47元/天解锁文章