React中setState两种写法有何区别？为何箭头函数内调用会报错？

算力阿峰

2026-10-10

问题原因分析

你遇到的*this.setState is not a function*报错，本质是执行this.setState({})时，当前上下文的this.setState不是可调用的函数类型。正常继承React.Component的类组件实例会从原型链继承内置的setState方法，触发这个报错的常见原因包括：

本地编译环境对类属性箭头函数语法的支持不完善，导致箭头函数预设的this绑定没有生效，this指向错误
exampleFn作为回调传递、调用时被修改了this指向，丢失了组件实例上下文

你添加等号后没有报错是假象：this.setState = ({})根本不是调用状态更新方法，而是给当前组件实例的setState属性赋值为一个对象，直接覆盖了原型链上的原生setState方法。这行只是普通的赋值操作，自然不会抛出函数调用相关的错误，但完全没有触发React的状态合并、组件重渲染流程，属于错误用法。

两种写法的核心区别

原生写法this.setState({key: value})：是调用React内置的组件实例方法，会执行状态合并、调度组件重渲染等完整的更新逻辑，是类组件更新状态的标准合法写法。
修改后的this.setState = ({key: value})：是对象赋值操作，直接重写了实例的setState属性，没有任何状态更新效果，仅能规避函数调用报错，不应该在正式代码中使用。

修复方案

如果要解决原生写法的报错，可以参考以下操作：

确认编译环境支持类属性箭头函数语法，Babel环境需要开启@babel/plugin-proposal-class-properties插件
改用构造函数手动绑定this的写法，兼容性更强：

class ListWrapper extends React.Component {
  constructor(props) {
    super(props)
    // 手动绑定this到组件实例
    this.exampleFn = this.exampleFn.bind(this)
  }
  exampleFn() {
    this.setState({
      // 要更新的状态字段
    })
  }
  render(){ 
    return( // 渲染逻辑 )
  }
}