>
 increment: function() {
    this.setState({
      counter: this.state.counter + 1
    }); 
     console.log(this.state.counter)
  },
  decrement: function(){
    this.setState({
      counter: this.state.counter - 1
    });
     console.log(this.state.counter)
  },
  calFun: functin(){
     this.state.counter * 5; // incorrect
  }
  render: function() {
    return <div>
      <div id='counter'>{this.state.counter}</div> 
      <button onClick = {this.increment}> +1 </button> 
      <button onClick = {this.decrement}> -1 </button> 
     </div>
  }

{this.state.counter}  그러나 출력 번호가 올바르게 표시됩니다. console.log  항상 one more 를 센다  예를 들어 increment 를 클릭하면  두 번 콘솔에 0 가 표시됩니다  그리고 1 그런 다음 decrement 를 클릭하십시오.  콘솔 쇼 2 , 1  내 프로그램이 잘못 실행되었습니다. 내가 기대하는 것은 1 입니다 , 2 그런 다음 1 , 0

real-time 하는 방법  올바른 증감 카운트?

업데이트 :

아래로 변경 한 동안 검색 한 후 이제는 잘 작동하고 빠릅니다. componentWillUpdate()   update 를 만든다  조금 느리다

 this.setState({
      counter: ++this.state.counter
  });
 this.setState({
      counter: --this.state.counter
  });


  • 답변 # 1

    this.setState()   this.state 의 값을 비동기 적으로 업데이트 . 당신이 당신의 console.log(this.state) 를 만들기 때문에   this.setState() 를 호출 한 후 즉시 동 기적으로 호출   this.state 의 가치  이 시점에서 아직 변경되지 않았습니다. 현재 값만 기록합니다.

    업데이트 된 this.state 에 액세스하고 기록하려면 비동기 업데이트가 실행 된 후 수명주기 후크 componentDidUpdate() 를 사용할 수 있습니다.

  • 답변 # 2

    this.setState ()는 비동기 메서드이며 현재 상태를 의미합니다.

    따라서 다음 주에가는 두 가지 방법이 있습니다.

    1. 반응 상태 약속

    2. 반응 구성 요소 수명주기 방법을 사용하십시오.

    shouldComponentUpdate (nextProps, nextState)/componentWillUpdate (nextProps, nextState)

  • 답변 # 3

    this.setState 때문입니다.  비동기 적으로 작동합니다. 올바른 console.logs를 원하면 다음과 같은 코드를 사용해야합니다.

    this.setState({
      counter: this.state.counter - 1
    }, () => {
      console.log(this.state.counter);
    });
    
    

    https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

  • 이전 html - 반복적으로 사용한 후 죽는 앞으로/뒤로 탐색 링크
  • 다음 javascript - Ramda를 사용하여 조건에 따라 중첩 값 업데이트