這個檢查語句如何在反應中工作？

Question

這個函數在邏輯上是如何工作的？ 是否有任何更簡單的代碼版本我可以獲得更好的理解。

togglePersonHandler =()=>{

  const doesshow = this.state.showPerson;
  this.setState({showPerson : !doesshow});

}

Answer 1

togglePersonHandler =()=>{
    const doesshow = this.state.showPerson;
    this.setState({showPerson : !doesshow});
}

您的代碼可以編寫如下。 我們正在設置新狀態，使用setState調用，使用previousState的值。 我們獲得showPerson的先前值並使用否定“反轉”真值! 運營商。

togglePersonHandler = () => {
    this.setState((previousState) => {
         return {
             showPerson : !previousState.showPerson
         }
    });
}

這是編寫依賴於先前狀態的setState調用的推薦格式。

真值表

這是否定運算符如何影響布爾值，顯示在真值表中

----------------------------
| showPerson | !showPerson |
----------------------------
|    True    |     False   |
----------------------------
|    False   |     True    |
----------------------------