javascript - 访问静态 getDerivatedPropsFromState 内部的类函数

Question

我正在重构已弃用的生命周期方法 componentWillRecieveProps() 及其新的继任者 static getDerivatedPropsFromState()

我在重构时面临的问题是 componentWillRecieveProps() 在内部使用了一个类函数:

componentWillRecieveProps(nextProps) {
  if(this.props.theme !== nextProps.theme) {
    this.changeTheme()
  }
}

所以当我尝试在新的生命周期方法中访问这个函数时:

static getDerivatedPropsFromState(nextProps, prevState) {
  if(prevState.theme !== nextProps.theme) {
    this.changeTheme();
    return { prevState: nextProps.theme };
  }
  return null;
} 

错误跳转说 this.changeTheme() is undefined。

我应该如何在 static getDerivatedPropsFromState() 中引用这个函数？

任何关于为什么会发生这种情况的帮助和解释将不胜感激。

Answer 1

getDerivatedPropsFromState 仅用于更新状态。如果您计划进行更新，您应该使用 componentDidUpdate 代替 componentWillReceiveProps。

参见 https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data-when-props-change

在博客中提到:

The recommended upgrade path for this component is to move data updates into componentDidUpdate. You can also use the new getDerivedStateFromProps lifecycle to clear stale data before rendering the new props.

所以代替

componentWillRecieveProps(nextProps){
  if(this.props.theme !== nextProps.theme){
    this.changeTheme()
  }
}

另一种方法是这样做

static getDerivatedPropsFromState(nextProps, prevState) {
  if(prevState.theme !== nextProps.theme) {
    return { theme: nextProps.theme };
  }
  return null;
} 

componentDidUpdate(prevProps, prevState) {
  if (this.state.theme !== prevState.theme) {
    this.changeTheme();
  }
}