ReactJS中Cannot read property 'enqueueSetState' of undefined错误求助

看起来你遇到的问题核心是函数调用时的this上下文丢失，虽然你已经在constructor里手动绑定了setData的this，但在跨组件调用（从另一个类的Button触发）时，还是很容易出现this指向错误，导致调用this.setState时抛出异常。下面给你几个针对性的解决方案：

方案1：改用类属性箭头函数定义setData #

箭头函数会自动捕获当前组件实例的this，完全避免手动绑定可能带来的问题，代码更简洁也更可靠：

class ContentProcessing extends Component { 
  constructor(props) { 
    super(props); 
    this.state = {content: currentData}; 
    // 这里可以删掉原来的bind代码了
  } 
  // 用箭头函数定义方法，自动绑定组件的this
  setData = (data) => { 
    this.setState({ content: data }); 
  } 
  render() { 
    return ( 
      <div> 
        <Card title={this.state.content} /> 
      </div> 
    ); 
  } 
}

方案2：检查跨组件传递时的调用方式 #

如果你是通过props把setData传给Button所在的组件，确保调用时用箭头函数包裹，避免this上下文被篡改：

// 假设Button所在的组件是OtherComponent，在父组件中传递方法
<OtherComponent updateContent={this.setData} />

// 在OtherComponent中调用时，用箭头函数包裹
<Button onClick={() => this.props.updateContent(newContentData)} />

这种方式能确保调用setData时，this仍然指向ContentProcessing的实例。

方案3：处理组件卸载后的调用场景 #

如果Button所在组件在ContentProcessing已经卸载后还触发点击，调用setState会直接报错。你可以给组件添加挂载状态标记，避免在卸载后更新状态：

class ContentProcessing extends Component { 
  _isMounted = false; // 标记组件是否挂载

  constructor(props) { 
    super(props); 
    this.state = {content: currentData}; 
    this.setData = this.setData.bind(this); 
  }

  componentDidMount() {
    this._isMounted = true; // 组件挂载后标记为true
  }

  componentWillUnmount() {
    this._isMounted = false; // 卸载前标记为false
  }

  setData(data) { 
    // 只有组件挂载时才更新状态
    if (this._isMounted) {
      this.setState({ content: data }); 
    }
  } 

  render() { 
    return ( 
      <div> 
        <Card title={this.state.content} /> 
      </div> 
    ); 
  } 
}

优先尝试方案1或者方案2，这两种是解决这类问题最常用的手段，基本能覆盖绝大多数场景。

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