עדכון מוצר בריאקט
product/edit/:id, כי מעדכנים מוצר מסוים. הקישור מגיע מדף הפרטים של המוצר.useForm על ProductModel, ואותה בנייה של FormData ואותה תצוגה מקדימה של תמונה.put לכתובת המוצרים עם ה-id בסוף, לפי מוסכמת REST. אחרי העדכון מוצגת הודעה ומנווטים חזרה לרשימה בעזרת ה-props.required על התמונה, כי התמונה נמצאת בשרת ולא במחשב המשתמש. אם לא נשלחת תמונה חדשה, נשארת הישנה.useForm גם את setValue, ומשתמשים בה לקביעת הערכים הראשוניים של השדות.useEffect עם מערך תלויות ריק, כמו componentDidMount ב-class component.axios.get<ProductModel> ומשרשרים את ה-id מ-props.match.params. כאן משתמשים ב-then וב-catch כי אי אפשר להגדיר את פונקציית ה-useEffect כ-async.then קוראים ל-setValue עבור name, price ו-stock, ומציגים את התמונה הקיימת בתצוגה המקדימה מכתובת התמונות של השרת ושם התמונה.פרקי ההרצאה: עדכון מוצר בריאקט
תמלול ההרצאה: עדכון מוצר בריאקט
הטקסט המלא של הדקות הראשונות בהרצאה «עדכון מוצר בריאקט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שראינו איך אפשר לבנות טופס לצורך הוספת מוצר, כדאי לעבור בזריזות ולראות משהו מעניין בנוגע לטופס לעדכון מוצר.
אין צורך לבנות הכל מההתחלה, מפני שזה מאוד מאוד דומה. אני רק רוצה להראות קטע קוד מוכן שכתבתי, שזה קומפוננטה לעדכון מוצר, שיש בה איזשהו משהו שהוא חסר, ונשלים את זה כאן.
אבל לצורך כך בואו רגע נעשה איזה קוד review, נעבור על הקוד הזה בכדי טיפה להבין מה קורה בו. אז דבר ראשון יש פה את הקומפוננטה הזאת שתכף נצלול לתוכה.
מה שעשיתי זה קודם כל יש לנו כאן את הראוטינג שצריך להציג אותה. אם אנחנו נסתכל אנחנו נראה פה איזשהו ראוט זה שהוא נמצא בפרודקט סלאש אדיט סלאש ואז יש פה ראוט פרמטר מפני שכאשר אנחנו רוצים לעדכן מוצר אנחנו צריכים לעדכן מוצר ספציפי בדיוק כמו שהיה לנו בצפייה בפרטים של מוצר ספציפי.
קודם כל, איך אנחנו מציגים את זה? אז בproduct details, איפה הוא נמצא? יש לנו כאן עוד לינק. יש פה את הלינק של דאק ויש פה את הלינק של אדיט.
הלינק של אדיט מפנה אותנו לproduct/edit/ ואז שולח את הקוד. עד כאן בסדר. כאשר אנחנו מגיעים לקומפוננטה הזאת, אז כאן מה שיש זה קודם כל קבלה של ה-route parameter, פה למעלה, ואנחנו רואים שזה משולב עם ה-properties.
יש לנו את ה-functional component, למה זה functional? מפני שיש לנו פה טופס, וטופס אנחנו רוצים לעבוד עם use form שזה React hook.
אז הנה בדיוק ה-use form הקודם שיודע לטפל בפרודקט מודל, והנה ה-submit שכל מה שהוא עושה זה לוקח את הפרטים מהטופס, הופך אותו ל-form data כמו שלמדנו, ואז אנחנו שולחים את זה לשרת על ידי put ולא על ידי post.
זה דבר מאוד חשוב. אם אנחנו שולחים את כל הפרטים לעדכון, אז זה כמובן put request. אנחנו גולשים לאותה כתובת של המוצרים ומשרשרים לכתובת את הקוד, ואז ככה השרת יודע איזה מוצר אנחנו רוצים לעדכן. זו בעצם מוסכמה של REST API. הנה ה-form data.
נותנים איזה הודעת הצלחה ומנתבים חזרה למוצרים. כאן הניתוב מתבצע על ידי ה-props שמכיל לנו גם את ה-ID בתוכו וגם היסטורי.
אז כאן אנחנו לא צריכים להתעסק עם ה-react hook use history כמו שהיה לנו בטופס ההוספה, כי זה מופיע פה ופותר לנו את הבעיה. זה בעצם ה-submit, אם אנחנו יורדים פה למטה אנחנו רואים את כל הקוד של העדכון preview של התמונה, ממש same כמו שהיה לנו.
אם אנחנו יורדים כאן למטה אנחנו רואים את הטופס ובייסיקלי זה אותו דבר הנה אנחנו רואים את הניים עם כל הוולידציות שלו הנה אנחנו רואים את הפרייס עם כל הוולידציות סטוק הנה התמונה כאשר אין כאן שדה חובה זה לא הגיוני שהתמונה תהיה שדה חובה מפני שהתמונה לא נמצאת אצלי במחשב היא נמצאת בבאק-אנד אז אם היינו מגדירים שהתמונה היא שדה חובה
זה אומר שהיוזר צריך עכשיו להשיג איכשהו את התמונה ואין לה אותה במחשב. זה לא שהוא רואה טקסטים ויכול לעדכן אותם. אין לו את התמונה, התמונה נמצאת בבאק, היא לא בהכרח נמצאת אצלו במחשב.
לכן זה לא דבר נכון לעשות must, כלומר שדה חובה על תמונה כאשר אנחנו עושים update. כי אם אנחנו לא נשלח, אז מקסימום יש את התמונה הקודמת.
זה בעצם הקונספט. יש לנו פה את ה-preview, יש לנו את הלחצן update, ויש לנו ללחצן Cancel. זה בעצם הקוד.
יש כאן משהו חסר שאנחנו רוצים להבין קודם כל מה חסר פה וכמובן להשלים אותו. אז אני רוצה רגע לראות איך כל הסיפור הזה עובד. אז הנה אנחנו מגיעים לרשימת המוצרים. הנה אנחנו גוללים פה למטה והנה אני רואה פה תפוח ואני רוצה לעדכן אותו אז אני לוחץ על אפל ואני מגיע לדיטייל שלו. פה יש לי את ה-Back ופה יש לי את ה-Edit. בואו נלחץ על ה-Edit
והנה אני מגיע לטופס עדכון, וזה נראה כאילו שהכל בסדר, אבל זה לא. מה אתם רואים? מה חסר פה?
זה נראה דומה לטופס של ההוספה של המוצר, אבל זה לא בסדר שהמידע ריק מתוכן. למה זה לא בסדר שהמידע ריק מתוכן? מפני שכאשר אנחנו מבצעים עדכון, אנחנו כמובן רוצים לראות את כל השדות הקודמים, כל הערכים הקודמים של אותו אייטם שאנחנו מעדכנים.
כי בוא נניח שהמשתמש רוצה רק לעדכן את המחיר, זהו, הוא לא חייב לעדכן הכל. יש לו מוצר שהוא רוצה לעדכן, בסדר. הוא לא רוצה לעדכן את השם, הוא לא רוצה לעדכן את הסטוק, הוא לא רוצה לעדכן את התמונה, רק את המחיר.
אוקיי, הוא נכנס לאדיט, ומה הוא צריך לעשות עכשיו? להכניס הכל מההתחלה? הרי אם אני אנסה לעדכן רק את המחיר, ואני אגיד לו שהמחיר החדש זה 8.2, אני אבצע Update אז המערכת תגידו לי וואו וואו רגע אתה לא יכול עכשיו לעדכן מוצר בלי name אם אתה תעשה את זה אז ה-Backend לא יסכים לקבל את זה כי ה-Backend לא מוכן לקבל מוצר
בלי name גם עבור העדכון. אז כל מה שאנחנו רוצים לעשות זה רק עבור עדכון אנחנו רוצים להגדיר את השדות הקודמים את ה-Values הקודמים איך עושים את זה. מה שקורה זה ש-Use Form מספקת לנו את האפשרות הזאת.
בנוסף ל-register, handleSubmit ו-formState יש לנו אפשרות להשתמש בפונקציה שנקראת setValue. אז אנחנו גם אותה מביאים לכאן. לא היינו צריכים להשתמש איתה בהוספה של מוצר, רק בעדכון.
הפונקציה הזאת, כל מה שהיא מאפשרת לעשות זה לעדכן ערכי ברירת מחדל או ערכים ראשוניים עבור הטופס. אוקיי, איך עושים את זה?
קודם כל, כמה פעמים אני רוצה לעדכן ערכים כאלה? אני רוצה לעדכן משהו פעם אחת. אם אני נמצא ב-functional component ואני רוצה לעדכן משהו פעם אחת, אני צריך להשתמש ב-use effect.
אם הייתי ב-class component והייתי רוצה לעדכן משהו פעם אחת, הייתי משתמש ב-component add mount. אז בואו נשתמש כרגע ב-use effect, אנחנו ב-functional component.
יש לנו כאן פונקציה ואנחנו רוצים להפעיל