how to correctly setState in the reactjs function

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

asked Nov 26 '18 at 5:00

Wisnu Pramono E.S

309

2

Possible duplicate of How to access the correct `this` inside a callback?

– Boy With Silver Wings
Nov 26 '18 at 5: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 Pramono E.S
Nov 26 '18 at 5: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

– Boy With Silver Wings
Nov 26 '18 at 5:08

add a comment |

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

asked Nov 26 '18 at 5:00

Wisnu Pramono E.S

309

2

Possible duplicate of How to access the correct `this` inside a callback?

– Boy With Silver Wings
Nov 26 '18 at 5: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 Pramono E.S
Nov 26 '18 at 5: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

– Boy With Silver Wings
Nov 26 '18 at 5:08

add a comment |

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

asked Nov 26 '18 at 5:00

Wisnu Pramono E.S

309

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

reactjs base64

asked Nov 26 '18 at 5:00

Wisnu Pramono E.S

309

asked Nov 26 '18 at 5:00

Wisnu Pramono E.S

309

asked Nov 26 '18 at 5:00

Wisnu Pramono E.S

309

asked Nov 26 '18 at 5:00

Wisnu Pramono E.S

309

asked Nov 26 '18 at 5:00

Wisnu Pramono E.S

309

2

Possible duplicate of How to access the correct `this` inside a callback?

– Boy With Silver Wings
Nov 26 '18 at 5: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 Pramono E.S
Nov 26 '18 at 5: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

– Boy With Silver Wings
Nov 26 '18 at 5:08

add a comment |

2

Possible duplicate of How to access the correct `this` inside a callback?

– Boy With Silver Wings
Nov 26 '18 at 5: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 Pramono E.S
Nov 26 '18 at 5: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

– Boy With Silver Wings
Nov 26 '18 at 5:08

Possible duplicate of How to access the correct `this` inside a callback?

– Boy With Silver Wings
Nov 26 '18 at 5: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 Pramono E.S
Nov 26 '18 at 5: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

– Boy With Silver Wings
Nov 26 '18 at 5:08

add a comment |

2 Answers
2

active

oldest

votes

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 5:11

Jin

9311323

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 Pramono E.S
Nov 26 '18 at 5:20

add a comment |

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 5:27

Arunkumar Palanippan

9318

This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

– Wisnu Pramono E.S
Nov 26 '18 at 5: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 7:26

Thank you for the advice, I will try to explore more deeply

– Wisnu Pramono E.S
Nov 26 '18 at 7:37

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475013%2fhow-to-correctly-setstate-in-the-reactjs-function%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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 5:11

Jin

9311323

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 Pramono E.S
Nov 26 '18 at 5:20

add a comment |

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 5:11

Jin

9311323

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 Pramono E.S
Nov 26 '18 at 5:20

add a comment |

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 5:11

Jin

9311323

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 5:11

Jin

9311323

answered Nov 26 '18 at 5:11

Jin

9311323

answered Nov 26 '18 at 5:11

Jin

9311323

answered Nov 26 '18 at 5:11

Jin

9311323

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 Pramono E.S
Nov 26 '18 at 5:20

add a comment |

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 Pramono E.S
Nov 26 '18 at 5:20

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 Pramono E.S
Nov 26 '18 at 5:20

add a comment |

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 5:27

Arunkumar Palanippan

9318

This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

– Wisnu Pramono E.S
Nov 26 '18 at 5: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 7:26

Thank you for the advice, I will try to explore more deeply

– Wisnu Pramono E.S
Nov 26 '18 at 7:37

add a comment |

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 5:27

Arunkumar Palanippan

9318

This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

– Wisnu Pramono E.S
Nov 26 '18 at 5: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 7:26

Thank you for the advice, I will try to explore more deeply

– Wisnu Pramono E.S
Nov 26 '18 at 7:37

add a comment |

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 5:27

Arunkumar Palanippan

9318

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 5:27

Arunkumar Palanippan

9318

answered Nov 26 '18 at 5:27

Arunkumar Palanippan

9318

answered Nov 26 '18 at 5:27

Arunkumar Palanippan

9318

answered Nov 26 '18 at 5:27

Arunkumar Palanippan

9318

This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

– Wisnu Pramono E.S
Nov 26 '18 at 5: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 7:26

Thank you for the advice, I will try to explore more deeply

– Wisnu Pramono E.S
Nov 26 '18 at 7:37

add a comment |

This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

– Wisnu Pramono E.S
Nov 26 '18 at 5: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 7:26

Thank you for the advice, I will try to explore more deeply

– Wisnu Pramono E.S
Nov 26 '18 at 7:37

This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

– Wisnu Pramono E.S
Nov 26 '18 at 5: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 7:26

Thank you for the advice, I will try to explore more deeply

– Wisnu Pramono E.S
Nov 26 '18 at 7:37

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg