Question

对于我来说，我想使用“ base64-img”库将图片网址更改为base64文件。

我打算保存将文件转换为状态的结果。我尝试将其保存到变量也失败了。我写的脚本如下：

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

我收到一个错误Uncaught TypeError: Cannot read property 'setState' of undefined

我尝试将值设置为变量，然后console_log可以正常工作，但是无法从外部访问该值。

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

我想在函数外部使用值 b64 。谢谢

Answer 1

您曾经使用过

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

此处将指示函数实例，以便该实例不包含setState方法

所以我建议尝试这样使用

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

Answer 2

您可以使用ES6箭头函数调用setState并在函数外部或自定义函数中访问b64，可以在构造函数内部绑定函数并使用此函数进行访问

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

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);
   }

如何在reactjs函数中正确设置状态

2 个答案: