設置爲true的狀態返回false

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接收新的狀態和道具作爲參數，this.state將僅具有prev值，以檢查新的狀態值使用newState.key。

爲什麼會這樣？

默認情況下，此方法返回true，爲了檢查我們是否想渲染狀態/道具變化的組件，我們需要prev值和新值。這就是爲什麼this.state只有在這個方法中才會有prev值的原因。

寫這樣的：

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