React / Redux应用程序在settimeout内调度动作

Question

I am trying to dispatch an action inside settimeout, but getting error. I am having this code inside a container

Code

setTimeout(function(){ this.props.getData(); }, 3000);

Error

Uncaught TypeError: Cannot read property 'getData' of undefined

However this.props.getData(); works fine outside of settimeout

Answer 1

this won't refer to your component class when used inside the callback function. If the only thing being called by setTimeout is this.props.getData , then you don't need a new function to do that:

setTimeout(this.props.getData, 3000);

If you need to do additional work inside the callback function, then you can use a lambda function instead, because this will be the same as in the outer scope:

setTimeout(() => {
    // do something else
    this.props.getData();
}, 3000);

Answer 2

You have to bind this to the callback of setTimeout .

Like this: setTimeout(function(){ this.props.getData(); }.bind(this), 3000);

OR

setTimeout(()=>{this.props.getData();},3000)

Answer 3

The this inside your setTimeout() is not the this you are expecting it to be. Try binding the function to your current context and see if that works.

setTimeout(function(){
   this.props.getData();
}.bind(this), 3000);

Or you can use arrow functions like so:

setTimeout(() => this.props.getData(), 3000);

Arrow functions are contextless. They inherit the parent context.

References:

Arrow functions

Understanding JS this