为什么在setTimeout中调用setState时ReactJS会设置状态？

Question

In a simple reactJS class, this.setState() didn't actually set the state. I know it is called asynchronously but even when the component renders again, the state wasn't mutated. So this.state.showModal is false when component is mounted (as expected) then it is true "forever".

here's a simple example :

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>
    )
  }
}

Here's the Modal Component :

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

But, when I replace the hideModal function with a timeout like this :

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

The state is mutated and rendered as intended.

I'm just wondering why ReactJS could possibly reset state internally or prevent a state from mutating ?

Edit : Calls to hideModal and showModal added

Answer 1

You have a click handler on the parent element too which call the showModal and change the state to true.

When you click close button, that will call hideModal function, which will change the state to false but that click will propagate to parent element as well, which will call showModal which make it true again. Therefore it always remains true .

Solution: Remove showModal click handler from the parent element and put it where exactly you want it to be (i guess you want it on + ).

Answer 2

Since there is no plunker to play around, I am going to take a guess.

div being the parent of <Modal> , when click event is triggered on the Modal , it is also being propagated to div . So showModal state is set to false by hideModal() function and set back to true by showModal() function.

When hideModal() uses setTimeout() , it is getting called after showModal() is called.

Try adding event.stopPropagation in hideModal() function, it might work.

Alternatively, you should add showModal() as onClick handler for the + sign instead of whole parent div. Please find the code below:

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