Toast: please provide at least the "label" property to show the toast

ליאור נכתב על ידי ליאור לביא, עודכן בתאריך 18/07/2023

הודעת השגיאה

Toast: please provide at least the "label" property to show the toast

למה אנחנו רואים את הודעת השגיאה הזאת?

הודעת השגיאה Toast: please provide at least the "label" property to show the toast היא הודעת שגיאה שעשויה להופיע ב-Console של הדפדפן שלנו כאשר נבצע dispatch ל-Event מסוג ShowToastEvent ב-LWC כמו בדוגמה הבאה:

<!-- myComponent.html -->
<template>
	<lightning-button label="Show Toast" onclick={showToast}>
	</lightning-button>
</template>
// myComponent.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class MyComponent extends LightningElement {

    showToast(){
        const event = new ShowToastEvent({
            message: 'Well Done!',
			variant: 'success',
			mode: 'dismissible'
        });
        this.dispatchEvent(event);
    }
}

פתרון

הפתרון להודעת השגיאה Toast: please provide at least the "label" property to show the toast הוא מאוד פשוט. לרשימת המאפיינים של ה-ShowToastEvent יש להוסיף את המאפיין title ולתת לו ערך שאינו falsy ב-JavaScript כמו 0, null, undefined או false. שים לב שהודעת השגיאה מבלבלת, מאחר והיא מציינת property בשם label שאינו חלק מהמאפיינים של ShowToastEvent. הנה הקוד מהדוגמה הקודמת, אבל הפעם עם תיקון כך שלא יוביל להופעת הודעת השגיאה ב-Console.

// myComponent.js - Fixed

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class MyComponent extends LightningElement {

    showToast(){
        const event = new ShowToastEvent({
            message: 'Well Done!',
			variant: 'success',
			mode: 'dismissible',
			title: 'Success!'
        });
        this.dispatchEvent(event);
    }
}

כדי להגיע לפתרון הזה מה שהיה עלינו לעשות הוא שלושה דברים:

  1. ללחוץ על שם הקובץ בהודעת השגיאה ב-Console של הדפדפן ולבחון את הקוד ממנו מגיעה הודעת השגיאה. הנה הוא לבחינתך:
    // showToastEvent.js

(function s() {
    return (function() {
        $A.componentService.addModule('markup://lightning:showToastEvent', "lightning/showToastEvent", ["exports"], function(e) {
            const t = "lightning__showtoast";
            class o extends CustomEvent {
                constructor(e) {
                    const o = {
                        bubbles: true,
                        cancelable: true,
                        composed: true
                    };
                    if (e) {
                        const {label: t} = e;
                        if (!t) {
                            console.error('Toast: please provide at least the "label" property to show the toast')
                        }
                        o.detail = e
                    }
                    super(t, o)
                }
            }
            e.SHOW_TOAST_EVENT_NAME = t;
            e.ShowToastEvent = o;
            Object.defineProperty(e, "__esModule", {
                value: true
            })
        });
    }
    )
}
)()
    אם נבחן את הארגומנט e בפונקציה הזאת על ידי עצירה שלה בזמן ריצה באמצעות breakpoint בדפדפן נראה שמדובר באובייקט שמכיל שני שדות: label ו-toast, כשהשדה toast מחזיק אובייקט שנראה כמעט בדיוק כמו האובייקט ShowToastEvent.
  2. הדבר הבא שעלינו לעשות הוא לקרוא את התיעוד של Platform Show Toast Event, בדגש על החלק של שדות החובה באובייקט.
  3. לאחר בחינה חוזרת של הקוד בדפדפן נשים לב למשהו מעניין - הארגומנט e מכיל כמעט את כל השדות של ShowToastEvent, אבל עם נעדר אחד חשוב, השדה title, ומה שחשוב מאוד לדעת לגביי title הוא שהוא שדה חובה על ShowToastEvent. מכאן אפשר לשער שהקוד של Salesforce לוקח את הערך של השדה title מהאובייקט ShowToastEvent וממפה אותו לשדה label, ואם נשכח להוסיף את השדה title ל-ShowToastEvent או ניתן לו ערך Falsy הדבר יוביל לתנאי בשורה 16 להיות תנאי אמת ולהוביל להודעת השגיאה שאנחנו מקבלים.

לקריאה נוספת