Reactjs：Forループの内部コンポーネントを使用してください.DidMount

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)で）適用されてからそれをやりなおすのを待つか、これを完全に避けようとするのが最善の方法だと推測します。