setState在React中的行为

Question

I'm fetching data for my component inside of componentDidMount method which looks like this:

componentDidMount() {
   this.getSomeData();
}

And here is getSomeData method itself:

getSomeData() {
   var that = this;
   var setState2 = this.setState;
   var setState3 = this.setState.bind(this);
   axios.get('/someurl').then(function(response) {
      that.setState({ data: response.data }); // option A
      setState2({ data: response.data }); // option B
      setState3({ data: response.data }); // option C
   });
}

'option A' and 'option C' are working just fine, but 'option B' throws and error saying that 'updater' method can't be called on 'undefined' which means that meaning of 'this' context is wrong inside of setState. Okay, in 'option C' the value of 'this' is bound and it works, but can somebody explain why does work 'option A' which is not bound? Thanks a lot!

Answer 1

var that = this;
var setState2 = this.setState;
var setState3 = this.setState.bind(this);
axios.get('/someurl').then(function(response) {
    // Here, you are invoking setState as a method of `that`, which
    // above was defined as `this`, creating a closure in this function
    that.setState({ data: response.data }); 

    // setState2 is an unbound function reference, as you assigned it to
    // the function setState directly above, but didn't call bind() on it
    // thus, this function has no idea of what `this` is and so it's undefined
    setState2({ data: response.data }); // option B

    // setState3 is a bound function. it has captured the value of `this` above, and so will provide it to the body of the function it has been bound to
    setState3({ data: response.data }); // option C
});

I hope that clears things up

Answer 2

For option A, you stored a reference to the this context in the variable that , and then used that.setState , allowing you to get hold of the context without binding it anywhere.

Storing a reference to the context in another variable is a common solution to losing the context in callbacks. This is a JavaScript general behavior not limited to React.

Using arrow functions in ES6 , you can eliminate these binding "workarounds" because the this context will not be changed in the callback.

axios.get('/someurl').then((response) => {
   this.setState({ data: response.data }); // option A
});

Answer 3

Option A: You're calling setState on that which was defined as the outer this -> So it's a closure inside the callback.

Option B: setState2 is a reference to a function that no longer has its "context" - so it's unbound. Once the function is executed it has no idea of what this means (see example below)

Option C: setState3 is similar to setState2 , but it does know what this is, and it will make it accessible from within it.

---

Suggestions :

1. Use arrow functions : This will preserve the value of this , so you'll never have to reassign it ( var that = this )

2. Declare your class methods as anonymous arrow functions, to also preserve access to this (especially useful in React components):

    getSomeData = () => { // ... }; 

---

Example:

 class Test { constructor() { this.name = 'Test class'; } setState(res) { console.log('this', this); try { console.log('Class: ', this.name); console.log('setState', res); } catch (e) { console.warn('Ups! Something went wrong', e); } } getSomeData() { var that = this; var setState2 = this.setState; var setState3 = this.setState.bind(this); var fakeResponse = { data: 'I came from the Internet!', }; (function fakeAsync(response) { // option A console.group('Option A'); that.setState({ data: fakeResponse.data }); console.groupEnd(); // option B console.group('Option B'); setState2({ data: fakeResponse.data }); console.groupEnd(); // option C console.group('Option C'); setState3({ data: fakeResponse.data }); console.groupEnd(); })(fakeResponse); } } const test = new Test(); test.getSomeData(); 

If you look in your console you'll see:

Option A
  this Test {name: "Test class"}
  Class:  Test class
  setState Object {data: "I came from the Internet!"}
Option B
  this undefined
  Ups! Something went wrong TypeError: Cannot read property 'name' of 
      undefined
    at setState (VM272:53)
    at fakeAsync (VM625:75)
    at Test.getSomeData (VM273:81)
    at window.onload (VM503:87)
Option C
  this Test {name: "Test class"}
  Class:  Test class
  setState Object {data: "I came from the Internet!"}