React类组件调用setState无法修改状态，请求代码修正

你的代码核心问题是事件处理函数clickHandler的this指向错误。在React类组件中，类方法默认不会自动绑定this到组件实例，点击按钮触发clickHandler时，函数内部的this为undefined，调用this.setState会直接报错，导致状态无法更新。

以下是三种可行的修复方案：

方案一：构造函数内手动绑定this #

在组件构造函数中，通过bind方法将clickHandler的this绑定到组件实例，这是React类组件的经典处理方式。

constructor(props)
  {
    super(props);
    this.state ={
      content: "Initial Content"
    };
    // 手动绑定this到组件实例
    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler()
  {
    this.setState({
      content: "Final Content"
    })
    console.log("Clicked")
  }

  render()
  {
    return (
      <div>
      <h1>The content inside the state is: {this.state.content}</h1>
      <button onClick={this.clickHandler} >Click Me</button>
      </div>
    );
  }
}

方案二：箭头函数定义事件处理函数 #

箭头函数会自动捕获当前上下文的this，直接用箭头函数定义clickHandler，就能确保this始终指向组件实例，写法更简洁。

constructor(props)
  {
    super(props);
    this.state ={
      content: "Initial Content"
    };
  }

  // 箭头函数自动绑定this
  clickHandler = () => {
    this.setState({
      content: "Final Content"
    })
    console.log("Clicked")
  }

  render()
  {
    return (
      <div>
      <h1>The content inside the state is: {this.state.content}</h1>
      <button onClick={this.clickHandler} >Click Me</button>
      </div>
    );
  }
}

方案三：onClick中用箭头函数包裹 #

在按钮的onClick属性里，用箭头函数包裹clickHandler调用，这种方式无需修改函数本身，但每次组件渲染都会创建新的箭头函数，适合简单组件场景。

constructor(props)
  {
    super(props);
    this.state ={
      content: "Initial Content"
    };
  }

  clickHandler()
  {
    this.setState({
      content: "Final Content"
    })
    console.log("Clicked")
  }

  render()
  {
    return (
      <div>
      <h1>The content inside the state is: {this.state.content}</h1>
      {/* 箭头函数确保this指向组件实例 */}
      <button onClick={() => this.clickHandler()} >Click Me</button>
      </div>
    );
  }
}

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