3 טעויות תגובה למתחילים שיכולות להרוס את האפליקציה שלך

כמפתח React, אתה חייב לעשות כמה טעויות בעת קידוד עם המסגרת. חלק מהטעויות הללו נפוצות למדי. ובשל אופיים העדין, ייתכן שתתקשו לזהות את הבעיות הללו כדי לנפות באגים באפליקציה שלכם.

גלה שלוש מהשגיאות הנפוצות ביותר של React שמפתחים עושים. אתה יכול לעשות את הטעויות האלה כמפתח React מתחיל, ברמה בינונית או מתקדם. אבל למידה עליהם ועל ההשלכות שלהם תעזור לך להימנע ולפתור אותם.

1. שימוש בפונקציית התקשרות חוזרת מסוג שגוי

טיפול באירועים הוא נוהג נפוץ ב-React, via הפונקציונליות החזקה של האזנה לאירועים של JavaScript. אולי אתה רוצה לשנות את הצבע של כפתור כאשר אתה מרחף עליו. אולי אתה רוצה לשלוח נתוני טופס לשרת בעת ההגשה. בשני התרחישים הללו, תצטרך להעביר פונקציית התקשרות חזרה לאירוע כדי לבצע את התגובה הרצויה. זה המקום שבו כמה מפתחי React עושים טעויות.

קחו למשל את הרכיב הבא:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
פוּנקצִיָהhandleSubmit(ה) {
 e.preventDefault()
לְנַחֵם.עֵץ("הוגש טופס!")
 }
פוּנקצִיָההדפס(מספר) {
לְנַחֵם.עֵץ("הדפס", מספר)
 }
פוּנקצִיָהמַכפִּיל(מספר) {
לַחֲזוֹר() => {
לְנַחֵם.עֵץ("לְהַכפִּיל", מספר * 2)
 }
 }





instagram viewer
לַחֲזוֹר (
 <>
 {/* הקוד יגיע לכאן */}
 </>
 )
}

כאן יש לך שלוש פונקציות נפרדות. בעוד ששתי הפונקציות הראשונות לא מחזירות כלום, השלישית מחזירה פונקציה אחרת. אתה חייב לזכור את זה כי זה יהיה המפתח להבנת מה תלמד אחר כך.

כעת, עוברים ל-JSX, בואו נתחיל מהדרך הראשונה והנפוצה ביותר שבה תעביר פונקציה כמטפל באירועים:

<טופסב-Submit={handleSubmit}>
<קֶלֶטסוּג="טֶקסט"שֵׁם="טֶקסט"ערך ברירת מחדל="התחלתי"/>
<לַחְצָן>שלחלַחְצָן>
טופס>

דוגמה זו מעבירה את שם הפונקציה לאירוע באמצעות מאפיין onSubmit כך ש-React קורא handleSubmit כאשר אתה שולח את הטופס. בתוך handleSubmit, אתה יכול לגשת לאובייקט האירוע, מה שנותן לך גישה למאפיינים כמו event.target.value ושיטות כמו event.preventDefault().

הדרך השנייה להעביר פונקציה של מטפל באירועים היא לקרוא לה בתוך פונקציית ה-callback. בעצם, אתה מעביר הלאה. לחץ על פונקציה שקוראת עבורך ל-print():

{[1, 5, 7].מַפָּה((מספר) => {
לַחֲזוֹר (
 הדפס (מספר)}>
 הדפס {number}
 </button>
 )
})}

שיטה זו שימושית בתרחישים שבהם ברצונך להעביר נתונים מקומיים לפונקציה. הדוגמה לעיל מעבירה כל מספר לפונקציה print(). אם השתמשת בשיטה הראשונה, לא תוכל להעביר ארגומנטים לפונקציה.

השיטה השלישית היא שבה הרבה מפתחים עושים הרבה טעויות. נזכיר שהפונקציה הכפילה מחזירה פונקציה נוספת:

פוּנקצִיָהמַכפִּיל(מספר) {
לַחֲזוֹר() => {
לְנַחֵם.עֵץ("לְהַכפִּיל", מספר * 2)
 }
}

עכשיו אם השתמשת בו ב-JSX כך:

{[1, 5, 7].מַפָּה((מספר) => {
לַחֲזוֹר (
 כפול (מספר)}>
 כפול {number}
 </button>
 )
})}

במקרה זה, הפונקציה שממנה אתה חוזר לְהַכפִּיל() הוא מה שמוקצה ל-onClick. זה בעצם זהה להעתקת הפונקציה שהוחזרה והדבקתה בשורה ב-onClick. לשיטה האחרונה הזו אין מקרה שימוש. ברוב הפעמים, עדיף לך להוסיף את הפונקציה כמשתנה (שיטה ראשונה) או לקרוא לפונקציה בתוך התקשרות חוזרת (שיטה שנייה).

כל שלוש הטכניקות תקפות מכיוון שבכל המקרים אתה מעביר פונקציה לאירוע. ב-React, אתה צריך לוודא שאתה מעביר פונקציה לנכס אירוע. זה יכול להיות משתנה, פונקציה מקודדת קשה (inline), או אובייקט/פונקציה שמחזירה פונקציה אחרת.

2. פלט אפס במהלך בדיקת שווא

כשאתה עיבוד מותנה של אלמנט ב-React, אתה יכול להשתמש במשפט if...else או בטכניקת הקצר. קצר חשמלי כרוך בשימוש באמפרסנד הכפול (&&). אם התנאי שלפני האמפרסנד מוערך כ-true, הדפדפן מריץ את הקוד בעקבות האמפרסנד. אם לא, הדפדפן לא מפעיל שום קוד.

קצר חשמלי הוא הטכניקה הטובה יותר הודות לתחביר התמציתי שלה, אבל זה מגיע עם תופעת לוואי שמפתחים רבים לא מצליחים להבחין בה. טעות זו מתרחשת עקב אי הבנה בדיוק כיצד JSX עובד עם ערכים כוזבים.

שקול את הקוד הבא:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
const מערך = [1, 2, 3, 4]
לַחֲזוֹר (


 {array.length && (


מַעֲרָך פריטים:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

כל עוד יש במערך משהו בתוכו, React תדפיס כל פריט בעמוד. זה בגלל ה array.length המחאה מחזירה ערך אמיתי. אבל מה קורה אם המערך שלך ריק? ראשית, האלמנטים הבאים יופיעו בדף, וזה מה שאתה מצפה. עם זאת, תמצא אפס מוזר מופיע על המסך שלך.

הסיבה לכך היא array.length מחזיר אפס. הערך אפס מזויף ב-JavaScript. והבעיה היא ש-JSX מציג אפס על המסך. ערכים שקריים אחרים כמו null, false ו-undefined אינם מוצגים. זה יכול להוביל לחוויית משתמש גרועה מכיוון שאפס תמיד יופיע בדף. לפעמים האפס עשוי להיות כל כך קטן שאתה אפילו לא שם לב אליו.

הפתרון הוא להקפיד להחזיר רק או null, undefined או false. אתה עושה זאת על ידי בדיקה מפורשת של אפס בתנאי במקום להסתמך על ערך שגוי:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
const מערך = [1, 2, 3, 4]
לַחֲזוֹר (


 {array.length !== 0 && (


מַעֲרָך פריטים:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

כעת הערך אפס לא יוצג על המסך גם כאשר המערך ריק.

3. נכשל בעדכון המדינה כראוי

כאשר אתה מעדכן את המצב ברכיב React, אתה צריך לעשות זאת כראוי כדי למנוע תופעות לוואי לא רצויות. הטעויות הגרועות ביותר הן אלה שלא זורקות לך שגיאות. הם מקשים על ניפוי באגים ולגלות מה הבעיה. עדכוני מדינה גרועים נוטים להיות בעלי השפעה זו.

טעות זו נובעת מאי הבנה כיצד לעדכן את המצב כאשר אתה משתמש במצב הקיים. קחו למשל את הקוד הבא:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
const [מערך, setArray] = useState([1, 2, 3])
פוּנקצִיָהaddNumberToStart() {
 array.unshift (מספר)
 setArray (מערך)
 }
פוּנקצִיָהaddNumberToEnd() {
 array.unshift (מספר)
 setArray (מערך)
 }
לַחֲזוֹר (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
לְנַחֵם‎.log (מערך)
 }}
 >
 לְהוֹסִיף 0 להתחלה/סיום
 </button>
 </>
 )
}

אם היית מריץ את הקוד שלמעלה, תשים לב ששתי הפונקציות הוסיפו אפס להתחלה ולסוף של המערך. אבל הוא לא הוסיף את האפסים למערך המודפס על הדף. אתה יכול להמשיך ללחוץ על הכפתור, אבל ממשק המשתמש נשאר זהה.

הסיבה לכך היא שבשתי הפונקציות אתה משנה את המצב שלך array.push(). React מזהיר במפורש שהמצב חייב להיות בלתי ניתן לשינוי ב-React, כלומר לא ניתן לשנות אותו כלל. React משתמש בערכים התייחסותיים עם המצב שלו.

הפתרון הוא לגשת למצב הנוכחי (currentArray), ליצור עותק של המצב הזה ולבצע את העדכונים שלך לעותק זה:

פוּנקצִיָהaddNumberToStart(מספר) {
 setArray((currentArray) => {
לַחֲזוֹר [מספר, ...currentArray]
 })
}
פוּנקצִיָהaddNumberToStart(מספר) {
 setArray((currentArray) => {
לַחֲזוֹר [...currentArray, number]
 })
}

זו השיטה הנכונה לעדכן את המצב ב-React. כעת כאשר אתה לוחץ על הכפתור, הוא מוסיף אפס להתחלה ולסוף של המערך. אבל הכי חשוב, העדכונים ישתקפו בעמוד באופן מיידי.

מושגי JavaScript חשובים נוספים עבור React

מאמר זה כיסה כמה מהטעויות הנפוצות שיש להימנע מהן בעת ​​קידוד ב-React. כל שלוש הטעויות המכוסות כאן נובעות מכשל בהבנת JavaScript כראוי. מכיוון ש-React היא מסגרת JavaScript, תזדקק להבנה מוצקה של JavaScript כדי לעבוד עם React. משמעות הדבר היא ללמוד את המושגים החשובים הקשורים ביותר לפיתוח React.