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

我正在使用其新的后继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()中引用此函数？

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

最佳答案

getDerivatedPropsFromState仅用于更新状态。如果您打算进行更新，则应使用componentDidUpdate代替componentWillReceiveProps。

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

在博客中提到:



所以代替

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