Reactjs : for 루프 내부 componentDidMount 사용

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)) 후 나머지 작업을 수행하거나이 문제를 피하려고하는 것입니다.