0
I have a problem with "this" after the build using typescript + Reactjs, I have a function that reads an xmls to save in the bank, after tracking the error found that it runs where I declare "this" this way:
const _this = this;
Note: I need _this because setState is not accepted within the function, in case I transform the filerReader.onload
in Arrow Function it turns error too.
After build I get the following error:
: Referenceerror: this hasn’t been initialised - super() hasn’t been called at r (assertThisInitialized.js:3) at index.tsx:199 at l (Runtime.js:45) At Generator. _invoke (Runtime.js:264) at Generator.e. [as next] (Runtime.js:98) at r (asyncToGenerator.js:3) at s (asyncToGenerator.js:25) at asyncToGenerator.js:32 at new Promise () at a. (asyncToGenerator.js:21)
My code:
handleInputChangeTeste = async (e: any) => {
try {
let files = e.target.files[0];
var filerReader = new FileReader();
const streches: any = [];
const _this = this;
filerReader.onload = async function(e: any) {
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
// call 'xlsx' to read the file
var oFile = XLSX.read(binary, { type: "binary" });
var pages = _.size(oFile.SheetNames);
var size = _.size(oFile.Sheets.Página1) - 1;
for (let index = 0; index <= size; index++) {
// console.log("aqui length", streches.length);
for (let j = 0; j < pages; j++) {
//console.log(oFile.Sheets[oFile.SheetNames[j]]);
if (oFile.Sheets[oFile.SheetNames[j]]["A" + index] !== undefined) {
streches.push({
Lat_inic: oFile.Sheets[oFile.SheetNames[j]]["A" + index].v,
Lon_inic: oFile.Sheets[oFile.SheetNames[j]]["B" + index].v,
Lat_fim: oFile.Sheets[oFile.SheetNames[j]]["C" + index].v,
Lon_fim: oFile.Sheets[oFile.SheetNames[j]]["D" + index].v,
wildDayLong: oFile.Sheets[oFile.SheetNames[j]]["E" + index].v,
wildNocturnal: oFile.Sheets[oFile.SheetNames[j]]["F" + index].v,
domesticDayLong: oFile.Sheets[oFile.SheetNames[j]]["H" + index].v,
domesticNocturnal: oFile.Sheets[oFile.SheetNames[j]]["I" + index].v,
domesticTwilight: oFile.Sheets[oFile.SheetNames[j]]["J" + index].v,
acidentDayLong: oFile.Sheets[oFile.SheetNames[j]]["K" + index].v,
acidentNocturnal: oFile.Sheets[oFile.SheetNames[j]]["L" + index].v,
});
}
}
}
var date = new Date().getTime();
const strechFinsh = {
uid: "hhad26451",
code: `BD-${date}`, //"BD-251138"
type: "-",
area: "-", //"25 km"
registerNumber: "-", //215251
state: "-", //"São Paulo"
category: "-", //"Animal"
lastUpdate: date,
map: "-", //mapId2
database: "-", //"Animal",
deleted: false,
streches: streches,
};
_this.setState({ loadingData: true }, async () => {
console.log(streches)
if(streches.length > 0){
await _this.createStreche(strechFinsh);
}else{
showToast("Ops... parece que há dados errados no seu trecho, confira os dados e tente novamente!");
}
await _this.getStreches();
});
};
await filerReader.readAsArrayBuffer(files);
} catch (e) {
console.log("aqui error: ", e);
}
};
use
this.atributo
orthis.metodo = () => { ... }
, thethis
will always be thethis
...– Ivan Ferrer
Unused
const _self = this
, within a method, const is global. You were probably used to working with native javascript and usedvar _self = this;
to take this out of one scope and use it in another. In typescript, we no longer need to do this, because the scope is maintained, the variable that is defined as const is a constant, uselet variavel=
to work within the scope of their method, andsuper()
, in order to extend the father’s methods to his class... orvar variavel
whether to make a variable changeable, regardless of the scope.– Ivan Ferrer
Gives a read here
– Ivan Ferrer