在 React 中設置狀態的正確方法是什么

Question

老實說，這是我在 ReactJS 中的第一天。 我正在學習一些小的東西，比如state 。 我為切換按鈕創建了一個小程序。 它只會顯示“Hello world！” 或在按鈕切換時不顯示任何內容。 有一件事我不明白。 當我使用此語法時，我的代碼給了我一個錯誤：

  toggleHandler() {
    const currentStatus=this.state.display;
    this.setState({
      display: !currentStatus
    })
  }

this.state 未定義

但是如果我將語法更改為粗箭頭函數，則相同的代碼可以完美運行：

  toggleHandler=()=> {
    const currentStatus=this.state.display;
    this.setState({
      display: !currentStatus
    })
  }

我不會浪費你的時間。 我創建了一個stackblitz 。 互聯網上的專家說，對this.setState()任何調用都是異步的。 所以我嘗試使用call back function和IIFE但讓自己更加困惑和過於復雜。 請糾正我。 對不起，這是一個非常幼稚的問題。

Answer 1

有幾種方法。

一種是在構造函數中添加。 ES6 React.Component 不會自動綁定方法到它自己。 您需要自己在構造函數中綁定它們。 像這樣

this.toggleHandler = this.toggleHandler.bind(this);

另一個是箭頭函數toggleHandler = (event) => {...}.

然后是onClick={this.toggleHandler.bind(this)}

參考

Answer 2

是的，任何 setState 調用都是異步的。 你可以檢查你的日志，它改變了他的狀態，但不操縱 dom。 對於操作 dom 任何異步調用都應該通過回調函數。

您可以使用此箭頭函數或 this.state.bind(this) 綁定任何狀態。

Answer 3

錯誤消息告訴您的是this對象不包含名為state的屬性。 究竟this是指是混亂的在JS的恆定源，除了當一個箭頭函數內部。 在箭頭函數內部， this總是指箭頭函數出現的上下文。

這里的問題是在第一個示例中， this是指由 onClick 事件發送到處理程序的上下文。 此上下文不包含state屬性。 但是，在箭頭函數內部， this關鍵字將引用您的箭頭函數所在的 JavaScript 類。該類確實具有state屬性。

為了解決這個問題，你可以使用bind （它輸出你的函數的副本，上下文設置為你提供的任何內容。或者只是使用箭頭函數。如果是我，我會采用后一種方法，因為this有更好的定義和箭頭函數內更一致的行為。如果你想使用bind ，你可以在你的事件處理程序聲明中這樣做：

onClick={this.toggleHandler.bind(this)}

Answer 4

您可以使用函數的方式和以前的狀態。

1- 在構造函數中綁定

constructor() {
    this.toggleHandler=this.toggleHandler.bind(this);
  }

可以這樣定義

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }

2-箭頭函數（不需要在構造函數中綁定）

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }

3- 內聯綁定

<Button onClick={this.toggleHandler.bind(this)}>Toggle</Button>

功能碼

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }

4- 內聯箭頭函數

 <Button onClick={()=>this.toggleHandler()}>Toggle</Button>

功能碼

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }

注意 - 建議避免使用內聯函數以獲得更好的性能