React this.setState is not a function inside setTimeout

Question

The current component is state.breakerfalse. When a scroll event is captured, it looks at state, and if it is false, it does some things.

I would like to have some static delay before the action repeats and that inside the goTofunction is state.breakerset to trueand will block further logic of the current method for the next 2suntil setTimeoutit returns to false.

But at the moment, the following error appears: Unconnect TypeError: this.setState is not a function when setStatecalled internally setTimeout.

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

    this.state = {
      breaker: false
    }

    this.scrollRedirect = this.scrollRedirect.bind(this);
  }

  componentDidMount() {
    this.refs.holder.addEventListener('mousewheel', this.scrollRedirect);
  }


  scrollRedirect(e) {

    const path = this.props.location.pathname,
    goTo = (route) => {
      this.setState({breaker: true});
      hashHistory.push(route);

      setTimeout(function () {
        this.setState({breaker: false});
      }, 2000)
    };

    if (!this.state.breaker) {
       ... code that executes goTo on condition
    }
  }

  ... render code

}

Answer 1

. :

setTimeout(() => {
  this.setState({breaker: false});
}, 2000)

, window , Function.prototype.bind. , :

setTimeout(function () {
  this.setState({breaker: false});
}.bind(this), 2000)