getDerivedStateFromProps每当接收到新的 props、setState和forceUpdate时，钩子的工作方式。

在 的版本中16.3，React 不会getDerivedStateFromProps在任何时候setState被使用。但是他们在以 开头的版本中对其进行了改进 16.4，因此无论何时setState调用 ，getDerivedStateFromProps都会被挂钩。

这是从React 生命周期图中提取的图像：

16.3

^16.4

所以，什么时候getDerivedStateFromProps通过正确检查 props 和 state来挂钩由你决定。下面是一个例子：

static getDerivedStateFromProps (props, state) {
  // check your condition when it should run?
  if(props.currentMonth != state.currentMonth) {
    return {
      currentMonth: state.currentMonth
    }
  }
  // otherwise, don't do anything
  else {
   return null
  }
}

我做了这样的事情

constructor(props) {
    super(props);
    this.state = {
        expanded: props.expanded,
        ownUpdate: false
    }
}

static getDerivedStateFromProps(props, state) {
    if (state.ownUpdate) {
        return {
            expanded: state.expanded,
            ownUpdate: false
        };
    } else if (props.expanded !== state.expanded) {
        return {
            expanded: props.expanded
        };
    }
    return null;
}

toggle() {
    this.props.onAftePress(this.state.expanded, this.props.index);
    this.setState({
        expanded: !this.state.expanded,
        ownUpdate: true
    })
}

我也遇到了那个问题。所以我设置了另一个变量来检查是第一次收到的props。

this.state={flag:true}

在getderivedstatefromprops 中

static getderivedstatefromprops(props, state){
   if(props.<*propName*> && flag){
      return({ props.<*propName*>, flag:false})
   }
}

如果你想使用多个 props 值，你需要相应地设置你的 if 语句（或任何其他逻辑）。

你的问题本身就有答案。“在每个渲染方法之前调用”。每当您执行setState该render方法时，都会调用该方法。

我建议你解除状态变量currentMonth和currentYear组件的父，并通过他们的props与其他三个一起。您还可以将更改处理程序作为props传递并从子级调用它。

在初始render- currentMonth并且currentYear可以设置为null，以便您可以拥有显示默认内容的逻辑。当有人选择月份名称时，您可以调用changeHandler将传递新props的来自父级。现在getderivedstatefromprops你不再有currentMonthand currentYearas `null 这样你就知道月份已经改变了。