在同一组件内调用一个函数说this.checkUpdate不是一个函数

Question

I have the following upload function which uploads the files to s3

   _.each(files, file => {
      let uuid = this.appMsgService.getGUID();
      let bucket = new AWS.S3({ params: { Bucket: 'myBucket' } });
      let params = { Key: `\source/${uuid}.pdf`, Body: file };
      this.fileNames[file.name] = `${uuid}.pdf`;
      this.fileName = `${uuid}`;
      bucket.upload(params, function (error: any, res: any) {
        uploadCount += 1;
        console.log('error', error);
        console.log('response', res);
        if (uploadCount === files.length) {
          this.interval = setInterval(() => {
            console.log(JSON.stringify(this.fileNames));
            this.checkUpdate(this.fileNames);
          }, 3000);
        }
      });

    });

i have another function inside the same component which is called using a timer and check for the updates

checkUpdate(filenames: any) {
}

I have added the method call inside the callback of the upload, but it gives an error saying _this.checkUpdate is not a function

Answer 1

Change

bucket.upload(params, function (error: any, res: any) {

to

bucket.upload(params, (error: any, res: any)=> {

Your this is not refering to your component.

Old js way:

var self = this; //<-- use self to refer to the component in the lexical scope
bucket.upload(params, function (error: any, res: any) {
    uploadCount += 1;
    console.log('error', error);
    console.log('response', res);
    if (uploadCount === files.length) {
    self.interval = setInterval(() => {
        console.log(JSON.stringify(self.fileNames));
            self.checkUpdate(self.fileNames);
        }, 3000);
    }
});