为什么getstrivedstatefromprops在setstate之后被调用？

Question

React引入了getDerivedStateFromProps(props, state)在每个渲染方法之前调用的新静态方法,但为什么呢？在改变道具之后调用它对我来说是有意义的,但在setState它没有之后,也许我错过了一些东西.

我datePicker根据公司要求创建了一个组件,组件日期由prop控制.我在组件中有以下状态.

selectedDate: number;
selectedMonth: number;
selectedYear: number;
currentMonth: number;
currentYear: number;
view: string;

selected表示从日期道具派生的选定日期,currentMonth并currentYear表示当前日历视图中的月份和年份.

如果date从道具的变化selected*,currentMonth并currentYear应相应改变.为此,我正在使用,getDerivedStateFromProps但是让用户点击月份名称将日历视图切换到月份(而不是显示月份的日期名称),该函数currentMonth使用setState 更新为此,但是prop的日期与之前(包含前一个月)应该,但是getDerivedStateFromProps被调用,currentMonth再次与之前相同,而不是更改.

我正在创建一个额外的变量state来跟踪是否getDerivedStateFromProps被调用,setState但我不认为这是正确的方法.

无论是我做错了什么或丢失了什么或者getDerivedStateFromProps不应该被打电话setState.可能我做错了什么.

Answer 1

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
  }
}

Answer 2

我做了这样的事情

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
    })
}

Answer 3

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

this.state={flag:true}

在从 props 获取派生状态中

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

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