Reactjs：在組件內部使用for-loopDidMount

Question

我無法理解爲什麼我的組件狀態在for循環中沒有更改。

下面是一個例子：

class Example extends React.Component { 
    constructor() { 
     super() 
     this.state = { 
      labelCounter: 1, 
     } 
    } 


    componentDidMount() {     
     for (let i = 0; i < 10; i++) { 
      this.setState({ labelCounter: this.state.labelCounter + 1 }) 

      console.log(this.state.labelCounter) // this.statelabelCounter = 1 
     } 
    } 

} 

而如果我稍微改變了代碼到這一點，似乎正在改變預期：

class Example extends React.Component { 
    constructor() { 
     super() 
     this.state = { 
      labelCounter: 1, 
     } 
    } 


    componentDidMount() {     
     for (let i = 0; i < 10; i++) { 
      this.setState({ labelCounter: ++this.state.labelCounter }) 

      console.log(this.state.labelCounter) 
     } 
    } 

} 

Answer 1

糾正我，如果我錯了，但「這.state.labelCounter + 1「與」this.state.labelCounter ++「不同，因爲它在更改狀態值之前正在評估狀態值。

另一種選擇是 「this.state.labelCounter + = 1」

來源： （不完全相似） Difference between ++ and +=1 in javascript

Answer 2

我想你遇到的問題是，反應批更新國家。這意味着它不是同步工作，而是在循環後應用setState({ labelCounter: this.state.labelCounter + 1})，並且this.state.labelCounter + 1被解析爲固定數字（本例中爲1），該數字重新應用了10次。所以labelCounter設置爲1 10次。

在上一個示例中，您通過自己更改屬性進行更新（並且沒有做出反應），這就是它工作的原因。

我猜想最好的辦法是等待一批已被應用（例如使用setTimeout(x, 0)），然後再做其他事情，或者試圖完全避免這種情況。