React继承组件中setState使用方法及状态修改无效问题排查

嘿，我来帮你搞定这两个React类组件继承相关的状态问题～

在继承React.Component的类组件体系里，子组件可以直接使用this.setState()来修改状态——因为这个方法是从父组件（最终是React.Component）继承下来的，只要你遵循几个基本规则就行：

• 子组件的构造函数必须先调用super(props)，这样才能正确继承父组件的上下文、状态和方法
• 如果父组件已经初始化了状态，子组件可以直接修改这个状态，或者扩展新的状态字段
• 避免在构造函数里直接调用setState，构造函数里应该直接赋值this.state来初始化

举个简单的示例：

// 父组件
class BaseComponent extends React.Component {
  constructor(props) {
    super(props);
    // 父组件初始化状态
    this.state = { foo: 'bar' };
  }
}

// 子组件
class MyComponent extends BaseComponent {
  // 点击按钮触发状态更新
  handleUpdate = () => {
    // 直接调用继承来的setState修改状态
    this.setState({ foo: '我是更新后的foo' });
  };

  render() {
    // 可以直接访问继承的状态
    return (
      <div>
        <p>当前foo的值：{this.state.foo}</p>
        <button onClick={this.handleUpdate}>更新状态</button>
      </div>
    );
  }
}

先看你的代码逻辑，问题出在这几个地方：

1. 父组件构造函数调用的是子组件重写的方法：你的BaseComponent在构造函数里调用了this.setMyState()，但MyComponent重写了这个方法，重写后的setMyState只打印警告，完全没有执行修改状态的逻辑，所以状态自然还是初始的{ foo: 'bar' }。

2. 可能忽略了setState的异步特性：就算你在方法里调用了setState，如果立刻打印this.state，也会看到旧值——因为React的setState是异步批量更新的，不能同步获取更新后的状态。

修复方案 #

方案1：让子组件继承并扩展父组件的状态修改逻辑

先给父组件的setMyState添加基础的状态修改逻辑，子组件如果需要扩展，调用super.setMyState()来执行父类的逻辑：

// 修改后的BaseComponent
export class BaseComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { foo: 'bar' };
    this.setMyState();
  }

  // 父组件定义基础的状态修改方法
  setMyState() {
    this.setState({ foo: '父组件更新后的foo' });
  }

  render() {
    return <div></div>;
  }
}

// 修改后的MyComponent
import { BaseComponent } from 'path/to/BaseComponent';

export class MyComponent extends BaseComponent {
  setMyState() {
    console.warn('MyCom...');
    // 调用父类的setMyState，执行父组件的状态修改逻辑
    super.setMyState();
    // 可以再添加自己的状态修改逻辑
    this.setState({ foo: '子组件更新后的foo' }, () => {
      // 用回调函数获取更新后的状态
      console.log('更新后的foo:', this.state.foo);
    });
  }
}

方案2：如果是在其他场景调用setState无效果

如果你是在MyComponent的其他方法里调用setState没生效，检查这几点：

• 不要在构造函数里调用setState，构造函数里直接赋值this.state
• 如果是在事件处理或生命周期里调用，确保用回调函数获取更新后的状态：

  componentDidMount() {
    this.setState({ foo: '挂载后更新' }, () => {
      console.log('更新后的状态:', this.state.foo);
    });
  }
  

• 不要直接修改this.state（比如this.state.foo = 'new'），必须通过setState来修改，否则React不会触发重新渲染

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