react-grid-layout报错：无法在未挂载的组件上调用setState如何解决

你遇到的「Can't call setState on a component that is not yet mounted」警告，本质是在组件完成挂载流程前就触发了状态更新逻辑，结合你提供的代码场景，可通过以下方案修复：

方案1：添加组件挂载状态校验 #

在类组件中新增挂载标记，调用setState前先判断组件是否已完成挂载：

class ChartComponent extends React.Component {
  // 新增挂载标记，初始值为false
  isMounted = false;
  state = {
    charts: [],
    newCounter: 0,
    cols: 12
  }

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

  componentWillUnmount() {
    // 组件卸载后标记为false，避免卸载后更新状态报错
    this.isMounted = false;
  }

  onChartItem() {
    /*eslint no-console: 0*/
    console.log("adding", "n" + this.state.newCounter);
    // 新增判断：仅组件已挂载时才执行状态更新
    if (!this.isMounted) return;
    this.setState({
      charts: this.state.charts.concat({
        i: "n" + this.state.newCounter,
        x: (this.state.charts.length * 2) % (this.state.cols || 12),
        y: Infinity,
        w: 8,
        h: 6
      }),
      newCounter: this.state.newCounter + 1
    });
  }
}

方案2：检查事件绑定逻辑 #

该问题的高频出错原因是按钮事件绑定错误：

• 不要在render方法中直接调用onChartItem，比如错误写法为<button onClick={this.onChartItem()}>，括号会导致函数在渲染阶段直接执行，此时组件可能还未挂载完成就触发了setState
• 正确的绑定写法为<button onClick={() => this.onChartItem()}>或者在constructor中提前bind：this.onChartItem = this.onChartItem.bind(this)后直接写<button onClick={this.onChartItem}>

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