Я пишу выноску POST из компонента LWC и после выноски хочу сделать всплывающее уведомление, но получаю сообщение об ошибке в файле Javascript, пожалуйста, помогите мне в этом.

Код, как показано ниже:

fetch(URL_FORCE_FUNDS , {
                method: "POST",
                headers: headers,
                body: urlencoded
            })
                .then(function (response) {
                    //this.dataFromServer = response;
                    console.log('Here is the Data from Server == '+JSON.stringify(response));
                    return response.json();
                })
                .then(function (data) {
                    //console.log('data is: ' + JSON.stringify(data))
                    
                    if(data.serviceStatus == 'ERROR') {
                        this.showToast('Error',data.data.errorMessage,'Error');
                        this.closeHandler();
                    }
                });

Ошибка, которую я получаю, как показано ниже

   lwcForceFundOnTroubleshoot.js:4 Uncaught (in promise) TypeError: Cannot set property 'showToast' of undefined
        at eval (lwcForceFundOnTrouble

shoot.js:4)

Примечание: метод showToast, который я уже определил в файле Javascript.

0
Riyan 31 Авг 2021 в 10:12
Похоже, что this неправильно привязан в теле функции, попробуйте использовать стрелочные функции, которые имеют this из родительского контекста. (data) => {...}
 – 
Damecek
31 Авг 2021 в 10:41
Можете ли вы опубликовать любой пример здесь .. это будет полезно
 – 
Riyan
31 Авг 2021 в 10:46
.then((response) => { //this.dataFromServer = response; console.log('Вот данные с сервера == '+JSON.stringify(response)); return response.json(); }) . then((data) => { //console.log('data is: ' + JSON.stringify(data)) if(data.serviceStatus == 'ERROR') { this.showToast('Error',data.data .errorMessage,'Ошибка'); this.closeHandler(); } });
 – 
Damecek
31 Авг 2021 в 11:21

2 ответа

Лучший ответ

Я лично рекомендую использовать await/async, так как его гораздо легче читать:

try {
  const response = await fetch(URL_FORCE_FUNDS, { method: 'POST', headers, body: urlencoded});
  console.log('Here is the Data from Server == '+JSON.stringify(response));
  if(response.serviceStatus == 'ERROR') {
    this.showToast('Error', response.data.errorMessage,'Error');
    this.closeHandler();
  }
} catch(e) {
  // Do something with error here
}

Обратите внимание, что метод, в котором содержится это, должен иметь ключевое слово async:

async myMethod() {
  // ...
2
sfdcfox 31 Авг 2021 в 14:20

Похоже, это ошибка при оценке this, как предложил @Damecek.

Я также предлагаю использовать для этого функции стрелок:

fetch(URL_FORCE_FUNDS, {
    method: "POST",
    headers: headers,
    body: urlencoded
  })
  .then((response) => {
    console.log('Here is the Data from Server == ' + JSON.stringify(response));
    return response.json();
  })
  .then((data) => {
    if (data.serviceStatus == 'ERROR') {
      this.showToast('Error', data.data.errorMessage, 'Error');
      this.closeHandler();
    }
  });

3
Jeferson Chaves 31 Авг 2021 в 11:46