Cannot bind context values to setInterval function Reactjs

Question

i have to say, that i searching for answer in hours and nothing helped me, so here my problem:

componentDidMount() {
  var self = this
  console.log(`INIT keys ${this.props.variants}`); // INIT KEYS [Object], [Object] ...
  this.interval = setInterval(function() {
    console.log(`Keys ${self.props.variants}`); // Keys ...
  }.bind(self), 1000)
}

Init keys exists, but keys inside interval not.
Can someone help me? :)

A lot can happen in 1,000ms. It's not a big surprise that the object has changed one second later, but this small bit of code doesn't give us enough to venture a guess as to why. — Jordan Running
– Jordan Running, Commented Jun 1, 2017 at 14:31
Is selfdefined ? Shouldn't you use this inside of your function instead of self? — Val Berthe
– Val Berthe, Commented Jun 1, 2017 at 14:31
@Ksyqo, OP isn't using this inside the callback (but uses self), so an arrow function wouldn't help here. — Chris
– Chris, Commented Jun 1, 2017 at 14:33
I believe your problem is in using self inside interval function. Try console.log(Keys ${this.props.variants}); instead — Igor Popov
– Igor Popov, Commented Jun 1, 2017 at 14:34
@JordanRunning thanks! Its definetly my fault, something is happen with my array of objects. For now i look for a trouble in another place, thanks again! — Nikita Goncharov
– Nikita Goncharov, Commented Jun 1, 2017 at 14:37

Kerumen · Accepted Answer · 2017-06-01 15:51:51Z

1

In your setInterval bound, you will have to use this and not self. Also, you don't need to redeclare this:

componentDidMount() {
  console.log(`INIT keys ${this.props.variants}`);
  this.interval = setInterval(function() {
    console.log(`Keys ${this.props.variants}`);
  }.bind(this), 1000)
}

If you can use arrow functions, you can ignore the bind as an arrow function doesn't redeclare this:

componentDidMount() {
  console.log(`INIT keys ${this.props.variants}`);
  this.interval = setInterval(() => {
    console.log(`Keys ${this.props.variants}`);
  }, 1000)
}

answered Jun 1, 2017 at 15:51

Kerumen

4,3512 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shubhankar Dimri Over a year ago

thanks a lot, it was really helpful. I had a similar issue

Collectives™ on Stack Overflow

Cannot bind context values to setInterval function Reactjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related