Question

我的React组件中有一个数据存储侦听器，在回调中我设置了状态。根据新状态中的参数，我决定是否渲染组件。

我的下面的代码实现了这一点，但结果出乎意料：

shouldComponentUpdate() {
    if (this.props.questionId == 4687760) {
        console.log(!!this.state.didAnswersChange);
    }
    return !!this.state.didAnswersChange;
}

onQuestionStoreChange() {
    let questionStoreData = this.questionStore.get(this.props.questionId);
    if (questionStoreData) {
        if (this.props.questionId == 4687760) {
            console.log(questionStoreData.didAnswersChange || false);
        }
        this.setState({
            didAnswersChange: questionStoreData.didAnswersChange || false
        });
    }
}

在第一个console.log我打印出来true。然后对于某些人shouldComponentUpdate()打印出false。

有人能帮我理解这是怎么回事吗？我已经确认正在打印的true确实来自onQuestionStoreChange()，而false正在打印出来的是shouldComponentUpdate()。

Answer 1

根据DOC shouldComponentUpdate(nextProps, nextState):

在接收新的道具或状态时，在渲染之前调用shouldComponentUpdate（）。

shouldComponentUpdate接收新状态和props作为参数，this.state只有prev值，用newState.key检查新的状态值。

为什么会出现这种情况？

默认情况下，此方法返回true，以检查我们是否要为状态/道具更改呈现组件，我们需要prev值和新值。这就是为什么this.state仅在此方法中具有prev值。

像这样写：

shouldComponentUpdate(nextProps, nextState){
    console.log(nextState.didAnswersChange);
}

State设置为true表示返回false

1 个答案: