Question

这是我的方法：

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

登录undefined时得到nextState.numMonthsToShow，因此在查看之后，该组件实际上使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函数中参数的顺序很重要。根据{{3}}，shouldComponentUpdate的正确签名为shouldComponentUpdate(nextProps, nextState)。

要获得所需的结果，您需要在函数中插入参数名称：

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

当比较“ nextProps”和“ nextState”时，“ shouldComponentUpdate”会切换道具和状态。

2 个答案: