`shouldComponentUpdate`在比较`nextProps`和`nextState`时切换属性和状态

Question

下面是我的方法：

shouldComponentUpdate = (nextState, nextProps) => {
    return nextState.numMonthsToShow !== this.state.numMonthsToShow;
}

当我登录nextState.numMonthsToShow时，我得到了undefined，所以在查看它之后，它看起来像是组件实际上混淆了nextProps和nextState。

以下是我的日志语句。

console log

下面是记录这些语句的位置：

shouldComponentUpdate = (nextState, nextProps) => {
    console.log('props:', this.props);
    console.log('nextProps:', nextProps);
    console.log('state:', this.state);
    console.log('nextState:', nextState);
    return nextState.numMonthsToShow !== this.state.numMonthsToShow;
  }

有人能帮我解释一下怎么回事吗？

Answer 1

您正在做错误的事情，使用shouldComponentUpdate(nextProps, nextState)而不是shouldComponentUpdate(nextState, nextProps)

Answer 2

JS函数中参数的顺序很重要。根据React docs，shouldComponentUpdate的正确签名是shouldComponentUpdate(nextProps, nextState)。

要实现所需的结果，您需要在函数中互换参数名称：

shouldComponentUpdate = (nextProps, nextState) => {
    return nextState.numMonthsToShow !== this.state.numMonthsToShow;
}