使用React的getDerivedStateFromProps时出现setState为null错误求助

嘿，这个问题我之前切换React生命周期的时候也踩过一模一样的坑，咱们来把问题拆解清楚：

核心错误原因 #

getDerivedStateFromProps是一个静态方法，它属于类本身而非类的实例，所以在这个方法里根本不存在this指向——这就是你看到Cannot read property 'setState' of null报错的直接原因。而且这个生命周期方法的设计逻辑也不是让你直接调用setState，它的作用是通过返回值来自动更新组件状态。

正确用法 #

这个方法需要返回一个对象，React会自动把这个对象合并到组件的state中；如果不需要更新state，就返回null即可。

修改后的代码示例：

class Main extends Component {
  // 静态方法不能用this，直接返回要更新的state字段
  static getDerivedStateFromProps(props) {
    console.log('getDerivedStateFromProps', props);
    // 返回需要更新的状态对象，这里同步props的modal到state
    return { modal: props.modal || {} };
  }

  constructor(props) {
    super(props);
    // 初始化时也可以直接用props的值，保持状态一致
    this.state = { modal: props.modal || {} };
  }
}

额外注意点 #

• getDerivedStateFromProps是纯函数，绝对不能在里面执行副作用操作（比如调用API、修改外部变量等），所有逻辑都应该基于传入的props和当前的state（这个方法还支持第二个参数state，用来对比前后状态，有需要的话可以加上）
• 如果你只是单纯想把props同步到state，也可以考虑用受控组件或者其他更简洁的方案，避免过度依赖这个生命周期方法~

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