React中如何使用getDerivedStateFromProps替代已弃用的componentWillReceiveProps

• 你写的getDerivedStateFromProps无法正常运行有两个核心错误：
  • 它是static静态方法，不存在组件实例this，所有对this.props、this.getList的调用都会直接报错
  • 该钩子的设计定位是仅根据props和state计算返回新的state，禁止在内部执行任何副作用操作（比如接口请求、调用实例方法都不属于它的职责范围）
• 你的需求是date属性变更时触发getList调用，属于副作用执行场景，本身就不适合用getDerivedStateFromProps实现

方案1：直接使用componentDidUpdate（官方推荐，完全对齐原有逻辑） #

直接替换原有componentWillReceiveProps和错误的getDerivedStateFromProps即可：

componentDidUpdate(prevProps) {
  const { date } = this.props;
  // 对比前后props的date值，变更时执行逻辑
  if (prevProps.date !== date) {
    console.log('prop changed to : ', date);
    this.getList(date);
  }
}

方案2：结合getDerivedStateFromProps实现（仅适用于需要把date同步到内部state的场景） #

如果你的组件内部需要将传入的date作为本地state使用，可以按如下方式实现：

1. 先在constructor中初始化state

constructor(props) {
  super(props);
  this.state = {
    // 存储props传入的date用于后续对比
    syncedDate: props.date,
    // 其他本地state字段
  }
}

2. 实现getDerivedStateFromProps同步props到state

static getDerivedStateFromProps(props, state) {
  if (props.date !== state.syncedDate) {
    // 仅返回需要更新的state字段，无更新返回null
    return {
      syncedDate: props.date
    }
  }
  return null;
}

3. 在componentDidUpdate中监听state变更执行副作用

componentDidUpdate(_, prevState) {
  const { syncedDate } = this.state;
  if (prevState.syncedDate !== syncedDate) {
    console.log('prop changed to : ', syncedDate);
    this.getList(syncedDate);
  }
}

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