how to correctly setState in the reactjs function

Question

In my case, I want to change the image url to base64 file using the "base64-img" library.

I intend to save the results of converting the file into a state. I tried saving it to a variable also failed. I wrote the script as follows:

var base64Img = require('base64-img');
base64Img.requestBase64('url_image', function(err, res, body) {
  this.setState ({ b64:body });
});

I get an error Uncaught TypeError: Cannot read property 'setState' of undefined

I try to set the value to a variable then console_log works well, but the value cannot be accessed from outside.

let b64;
base64Img.requestBase64('url_image', function(err, res, body) {
  b64 = body;
  console.log(b64);
});

I want to use the value b64 outside of the function. Thanks

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Agney, Nov 26 '18 at 05:02
Oh maybe yes for using 'this', I will read the link that you gave. But how can I access the variable that I filled with the results of the function. I did not successfully access the variable. Are there other ways that I can use other than my method above? — Wisnu, Nov 26 '18 at 05:06
Use an arrow function in place of your regular function and `setState` should work. If you do not want to set it to state, then a class variable in `this.b64` could also do the trick — Agney, Nov 26 '18 at 05:08

score 2 · Accepted Answer · answered Nov 26 '18 at 05:27

2

You can use ES6 arrow function to call setState and to access b64 outside the function or in custom function, you can bind the function inside the constructor and access using this

const base64Img = require('base64-img');
//convert image to base 64
convertImgtoBase64(imageUrl) {
    base64Img.requestBase64(imageUrl,(err, res, body) => {
       this.setState ({ b64:body });
    });
}

Like this

constructor(props){
    super(props);
    this.state = {
        b64: null
    };
    this.convertImgtoBase64 = this.convertImgtoBase64.bind(this);
    this.showBase64Value = this.showBase64Value.bind(this);
   }
   showBase64Value(){
      console.log(this.state.b64);
   }

answered Nov 26 '18 at 05:27

Arunkumar Palanippan

198
1
9

This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed. – Wisnu Nov 26 '18 at 05:55
Since state is updated, componentDidUpdate and render will be called again and you can see the converted base64 value from the state. – Arunkumar Palanippan Nov 26 '18 at 07:26
Thank you for the advice, I will try to explore more deeply – Wisnu Nov 26 '18 at 07:37

score 1 · Answer 2 · answered Nov 26 '18 at 05:11

1

You used

var base64Img = require('base64-img');
base64Img.requestBase64('url_image', function(err, res, body) {
  this.setState ({ b64:body });
});

Here this will indicate the function instance, so that that instance won't contain setState method

So I suggest to try to use like this

var base64Img = require('base64-img');
let _self = this;
base64Img.requestBase64('url_image', function(err, res, body) {
  _self.setState ({ b64:body });
});

answered Nov 26 '18 at 05:11

Julian

1,592
1
13
33

The way you suggest is successful. But I can only access it from within the function, but if I access it from outside the function doesn't work. Maybe I need to make a promise or async await huh? – Wisnu Nov 26 '18 at 05:20

how to correctly setState in the reactjs function

2 Answers2