setTimeout에서 setState를 호출 할 때 ReactJS가 상태를 설정하는 이유는 무엇입니까?

Question

간단한 reactJS 클래스에서 this.setState()는 실제로 상태를 설정하지 않았습니다. 비동기 적으로 호출된다는 것을 알고 있지만 구성 요소가 다시 렌더링 될 때도 상태는 변경되지 않았습니다. 그래서 this.state.showModal은이고 구성 요소가 마운트 될 때 (예상대로) true "영원히"입니다.

setTimeout(() => this.setState({ showModal: false }), 0)

:이 같은 시간 제한으로 hideModal 기능을 교체 할 때

class Modal extends Component { 
    render() { 
    return (
     <div className='configurator-modal'> 
     <button className='close' onClick={this.props.close}> x </button> 
     Modal 
     </div> 
    ) 
    } 
} 

그러나, 상기 모달 구성 요소

class MyComponent extends Component { 
    constructor (props) { 
    super(props) 

    this.state = { 
     showModal: false 
    } 

    this.showModal = this.showModal.bind(this) 
    this.hideModal = this.hideModal.bind(this) 
    } 
    showModal() { 
    this.setState({ showModal: true }) 
    } 
    hideModal() { 
    this.setState({ showModal: false }) 
    } 
    render() { 
    console.log(this.state.showModal) // Outputs true even after the hideModal() call 

    return (
     <Components> 
     <div onClick={this.showModal}> 
      { 
      this.state.showModal === true 
      ? <Modal 
       handles={handles} 
       close={this.hideModal} 
      /> 
      : '+' 
      } 
     </div> 
     </Components> 
    ) 
    } 
} 

여기

입니다 : 여기

은 간단한 예제

상태가 변형되어 렌더됩니다. d.

왜 ReactJS가 내부적으로 상태를 재설정하거나 상태가 변이되지 않도록 할 수 있는지 궁금합니다.

편집 : hideModal에 호출하고 showModal는 어느 showModal를 호출하고 true로 상태를 변경 너무 당신은 부모 요소에 click 핸들러가

Answer 1

놀거리가 없기 때문에 나는 추측을 할 것입니다.

div은 <Modal>의 부모이며 Modal에서 클릭 이벤트가 발생하면 div으로 전파됩니다. 따라서 showModal 상태는 false에 의해 hideModal() 기능으로 설정되고 true에 의해 showModal() 기능으로 다시 설정됩니다.

hideModal()이 setTimeout() 인 경우 showModal()이 호출 된 후에 호출됩니다.

event.stopPropagation을 hideModal() 기능에 추가하는 것이 좋습니다.

또는 전체 부모 div 대신 + 기호에 onClick 처리기로 showModal()을 추가해야합니다. 아래의 코드를 찾으십시오 :

<Components> 
    <div> 
     { 
     this.state.showModal === true 
     ? <Modal 
      handles={handles} 
      close={this.hideModal} 
     /> 
     : <div onClick={this.showModal}>'+'</div> 
     } 
    </div> 
    </Components> 

Answer 2

을 추가했다.

당신이 그것을 다시 true하게 showModal를 호출 할뿐만 아니라, false에 상태를 변경합니다하지만 클릭은 부모 요소에 전파되는, hideModal 함수를 호출합니다 close 버튼을 클릭

. 따라서 항상 true으로 유지됩니다.

해결 방법 : 부모 요소에서 showModal 클릭 핸들러를 제거하고 정확하게 당신이 (내가 생각 당신이 +에 원하는)되고 싶어 넣어.