27: حل مشكلة ال Object State في ال Form — Transcript
Full transcript
- 0:00السلام عليكم حياكم الله بالدرس ال 27 من
- 0:02سلسله دروس رياكت جي اس في الدرس السابق
- 0:05انتهينا عند المشكله اللي بنسوي فيها ست
- 0:07ستيت لابكت كامل وهذا عم يلغي لنا بعض
- 0:10الكيز اللي كانت مرتبطه فيها الانبوت
- 0:13الاخرى فكيف نحافظ على نفس ها الكيز ونحل
- 0:16ها المشكله هذا هو الكود اللي انتهينا
- 0:17عنده في الدرس السابق و مثل ما ذكرت انا
- 0:19كنت عم اعدل هون في الانبوت هذا الايميل
- 0:22وعم اخليه يمسح هذا النيم وهون عم اعدل
- 0:25النيم وعم خيه يمسح هذا الايميل وبالتالي
- 0:28كانه الستيت اللي كانت مرتبطه بهذا
- 0:30الانبوت عم تختفي لما اعدل هذا الانبوت
- 0:34والعكس صحيح فكيف ممكن نحل ها المشكله
- 0:37طبعا قد يكون خطر لك حل بديهي الى حد ما
- 0:41وهو انه بدل ما اني احط نيم واحط ايميل
- 0:45اجي مثلا بكل بساطه اقول له هون ماشي عدل
- 0:48لي الايميل بس بالاضافه الى ذلك حافظ لي
- 0:51على وجود النيم بحيث انه يكون له قيمه
- 0:53معينه خليني اخلي القيمه هي فاضيه على
- 0:55سبيل المثال في البدايه فلو سويت سيف الان
- 0:58ورجعت مره ثانيه خليني اسويي ريفريش بعدين
- 1:00لو عبيت الايميل لاحظ انه عبي اياه عبي
- 1:04الستيت ستيت فيها ايميل ونيم فاضي ما طلع
- 1:08لي اي مشاكل وبالتالي هل هو هذا الحل لو
- 1:11جيت وعدلت النيم الان ممكن يرجع يطلعلي
- 1:14مشكله اني ما سويت نفس الحل فراح اجي اسوي
- 1:16نفس الحل الى حد ما ققول له شوف عبيلي
- 1:18النيم وخليل لي الايميل فاضي راح اسوي سيف
- 1:22وارجع مره ثانيه اسوي ريفريش راح اعبي
- 1:26النيم الان لما عبيت النيم عبالي الستيت
- 1:29بحيث تحتوي على النيم اللي عبيته والايميل
- 1:31فاضي طيب لو جيت وعبيت وكتبت اي حرف بهذا
- 1:35الايميل ايش راح يصير حاول تستنتج اللي
- 1:38راح يصير لو كتبت حرف واحد فقط راح يختفي
- 1:41النيم تماما لاحظ انه النيم اختفى تماما
- 1:44ايش السبب اني عم اقول له لما يعدل على
- 1:47الايميل روح خذ القيمه اللي عدلتها وعبي
- 1:50لي اياها في الايميل بس خلي لي النيم يرجع
- 1:52فاضي فنعم ما عاد يطلع لي الخطا اللي كان
- 1:55يطلع لي اياه بس انا المشكله ما حافظت على
- 1:57القيمه اللي كانت موجوده في هذا الانبوت
- 1:59وترى العكس صحيح لما اكتب الايميل وبعدين
- 2:02اجي اكتب اي شيء في النيم راح يحطلي النيم
- 2:04ويمسح لي الاشياء الموجوده في الايميل
- 2:06فانا لازم احافظ على النيم والايميل
- 2:09بقيمهم اللي كانت موجوده فكيف احافظ عليها
- 2:12بكل بساطه بنفس الطريقه اللي انا كنت عم
- 2:14اسويلها ريد من خلال الفالو هون النيم كان
- 2:17عباره عن الفورم انبوت دوت نيم فلذلك لما
- 2:20بعدل الايميل بقول لله خذلي القيمه
- 2:22الجديده تبع الايميل بس النيم خليلي اياه
- 2:25مثل ما هو عن طريق انك تروح مره ثانيه
- 2:27للفورم انبوت وت تحديدا دوت نيم ولما اعدل
- 2:32النيم الايميل روح لي على القيمه الحاليه
- 2:35للايميل عشان تحافظ لي عليها اللي هي
- 2:38الفورم انبوت دوت ايميل فلو سويت سيف الان
- 2:42وجيت عدلت على النيم بعدين عدلت على
- 2:45الايميل لاحظ انه كل التعديلات موجوده
- 2:48وشغاله معي تمام بدون مشاكل طيب لو سويت
- 2:50سبمت الان راح يستدعي لي ها الداله اللي
- 2:53هي عباره عن الاون سبمت اللي انا عم اسوي
- 2:55فيها برنت للفولت بس ما عم يطلع لي شيء
- 2:57ثاني المميز الان بالموضوع المضوع اني انا
- 3:00جمعت الستيت في اوبجكت واحد فال الاوبجكت
- 3:03مجمع وجاهز عندي وممكن اني استفيد منه
- 3:05بشكل مباشر فانا مباشره ممكن اجي اقول له
- 3:08كونسول دوت لوج لهذا الاوبجكت اللي هو
- 3:11عباره عن الفورم انبوت فلو سويت سيف الان
- 3:14ورجعت مره ثانيه وسويت سبمت لاحظ انه مجهز
- 3:17لي اياهم ايميل ونيم ولو حطيت اي فيلد
- 3:20ثالث راح يكون نفس الشيء تماما راح يكون
- 3:23الاوبجكت جاهز فصار الاوبجكت الان جاهز
- 3:26ومستعد عندي عشان يتم ارساله كبدي برامج
- 3:29سواء في الا بي اي ريكويست او في غيره من
- 3:31الاشياء اللي انا ممكن استفيد منها لكن هل
- 3:34هذا الكود فعلا هو افضل كود ممكن يكون
- 3:36موجود عندي في مشكله موجوده عندي في هذا
- 3:39المكان تمنع قابليه التوسع بشكل جيد بمعنى
- 3:43اخر ماذا لو قررت اني اسوي انبوت ثالت لو
- 3:46جيت ونسخت هذا الانبوت وسويت انبوت ثالت
- 3:49هذا متخصص في العمر وبالتالي راح اجي اكتب
- 3:52هون الايج اللي هو عباره عن العمر لما
- 3:55اسوي انبوت ثالث هذا معناه اني لازم اضيف
- 3:58ستيت او جزء من ها الستيت اللي هو
- 4:01الاوبجكت تكون ثالثه مخصصه للاي فراح اجي
- 4:04اكتب هون ايج بهذا الشكل ويكون مبدئيا
- 4:07مثلا نل او صفر عادي ممكن يكون ن بدون
- 4:09مشاكل طيب ها هي المشكله بس اني لازم اضيف
- 4:11الايج مو ها هي المشكله المشكله لو سويت
- 4:14سيف وجيت وكتبت في النيم راح يمشي معك
- 4:17تمام لانه لسه الايج انا ما ربطته بالست
- 4:19بس لو قلتله انه هذا الانبوت تبع الايج
- 4:22فعليا هو مرتبط بالفور انبوت دوت ايج بحيث
- 4:26اني لما اغيره لازم يتغير الايج ايميل خلي
- 4:30لي اياه نفس الفورم انبوت دوت ايميل بس
- 4:34اللهم انه الكي الجديد اللي اسمه ايج راح
- 4:36يكون يتم اخذه من الايفينت دوت تارجت دوت
- 4:40value فلو سويت سيف الان ورجعت مره ثانيه
- 4:42لو عدلت على الايج حطيت رقم معين خليني
- 4:45نسوي فريش بس عشان يروح الخطا شوف عم
- 4:47يقوللك ان الفالو براب انبوت شد بي نول
- 4:49وبالتالي انا ممكن احط اي قيمه افتراضيه
- 4:51كعمر خليني احط مثلا انه الايج راح يكون
- 4:54على سبيل المثال شيء فاضي وراح اسوي سيف
- 4:57وراح ارجع مره ثانيه ريفريش لاحظ ان ما في
- 4:59خطا لو عدلت الايج راح يتعدل معك بدون
- 5:01مشاكل وراح تلاقي انه الاستيت تبع الماي
- 5:03فورم في لها الايج بهذا الشكل لكن لو جيت
- 5:06وعدلت على الايميل راح ترجع تطلع لك ها
- 5:08المشكله مره ثانيه لانه مره ثانيه الايميل
- 5:11نعم عم يحدث لك قيمه الايميل بحيث ياخذ
- 5:15القيمه الجديده وعم يحافظ على قيمه النيم
- 5:17بس ما عم يحافظ على قيمه الايج بمعنى اخر
- 5:20عشان تتصور المشكله ترى كل انبوت انا
- 5:23بضيفه لازم اروح عند هذا المكان واقول له
- 5:26شوف انتبه الايج لازم تاخذ قيمته الح
- 5:29الموجوده فيها عشان ما يصير عندي اي مشاكل
- 5:32وبعد ما اسوي الايج لو جيت وسويت فيلد
- 5:35جديد مثلا سميته الجندر كذلك راح اروح مره
- 5:38ثانيه واقوله لازم الجندر في كل انبوت
- 5:40موجود عندي وعم غير فيه هذا الاوبجكت لازم
- 5:42اقول لله الجندر خذ لي اياه من نفس القيمه
- 5:44الموجوده فيه الموضوع صار صعب التحكم لكن
- 5:47لحسن الحظ في طريقه اسهل انا ممكن اعتمد
- 5:50عليها انا عندي هذا المتغير اللي اسمه ست
- 5:54فورم انبوت اللي هو بغير لي القيمه اللي
- 5:57انا عم استفيد منه في تغيير القيمه و عندي
- 5:59الفورم انبوت اساسا اللي هو عباره عن
- 6:02الاوبجكت اللي بيحتوي لي على كل شيء في
- 6:03الوقت الحالي بمعنى اخر ايش رايك لو جيت
- 6:06وقلت له بدل ما تقول لي ست فورم انبوت
- 6:08بهذا الشكل ليش ما اجي اقول له كونست نيو
- 6:12فورم انبوت هو عباره عن نفس الفورم انبوت
- 6:16مثل ما هي تماما بهذا الشكل بس اللهم انه
- 6:19هذا النيو فورم انبوت بدي اعدل فيه الشيء
- 6:22اللي انا بدي اعدله اللي هو عباره عن
- 6:24الايميل راح اجي اقول له دوت ايميل يساوي
- 6:28الايفنت دت تارجت دوت فو بهاي الحاله انا
- 6:31ماني محتاج اروح امشي على كل الفيلدز
- 6:33واقول لله خذ لي القيم السابقه تبعهم فخص
- 6:36الان بيجي بقول له ست فورم انبوت هذا
- 6:39النيو فورم انبوت هو عباره عن اوبجكت فبحط
- 6:41مباشره بهذا المكان نيو فورم انبوت ماذا
- 6:44لو سويت سيف الان لو سويت سيف الان لاحظ
- 6:47انه هذا عدلته وين عند الايميل لو رحت عند
- 6:49الايميل الان وجيت كتبت شيء معين طبعا
- 6:52خليني اسسوي ريفريش بس عشان يروح الخطا
- 6:54راح اروح عند الايميل واكتب شيء معين لاحظ
- 6:57انه ما في شيء عم يتعدل عندي ايش المشكله
- 6:59اللي عم تصير لو عدلت على النيم حيت بعدل
- 7:01لكن الايميل في شيء في لخبطه معينه عم
- 7:04تصير ايش اللخبطه اللي عم تصير لاحظ انا
- 7:07ايش عم سوي عم اقول له سويلي نيو فورم
- 7:09انبوت يساوي هذا الفورم انبوت هذا ايش
- 7:11معناه هذا معناه انه الفورم انبوت هو نفس
- 7:14الاوبجكت تبع الفورم انبوت هذا بالباس باي
- 7:17ريفرنس اذا بتتذكر درس الباس باي ريفرنس
- 7:19والباس باي فالو بمعنى اخر كانه صار في
- 7:22عندي مؤشر لنفس الفورم انبوت طيب اذا صار
- 7:25عندي مؤشر لنفس الفورم انبوت ايش المشكله
- 7:27بهذا الكلام المشكله بهذا كلام اني برجع
- 7:30بذكرك من اول درس تكلمنا فيه عن الستيت
- 7:33الستيت ممنوع تغيرها عن طريق انك تسوي
- 7:37يساوي انا عم غيرها عم ارح على ال نيو
- 7:39فورم انبوت اللي هو فعليا ترى بيمثل لي
- 7:41الفورم انبوت اللي هي هاي هي هي الستيت
- 7:44تبع هذا الكومبوننت فكاني عم اقول له
- 7:47الفورم انبوت يساوي شيء معين وهذا الشيء
- 7:50ممنوع في رياكت بالنسبه للستات اذا بدك
- 7:52تغير قيمه الستيت لازم تغيرها من خلال
- 7:54الست فورم انبوت حتقوللي طيب انا استخدمت
- 7:57الست فورم انبوت يعني انا هون في في هذا
- 7:59المكان استخدمت الست فورم انبوت نعم انت
- 8:01استخدمتها بس قبلها رحت سويت علامه
- 8:04المساواه للنيو فورم انبوت حتى لو كان
- 8:06لاحد الكي لها فكانك فعليا عم تجي وتقول
- 8:10الفورم انبوت يساوي شيء معين وهذا الشيء
- 8:13ممنوع في رياكت ممنوع انه متغير الستيت
- 8:16تعطيه قيمه بهذا الشكل لانه شفنا المشكله
- 8:18سابقا هذا ما راح يخليه يسوي تريجر للر
- 8:21رندر وهذا راح يسبب لك مشاكل اخرى انه
- 8:23الاستيت ما راح تحافظ على قيمتها طيب شو
- 8:26الحل الحل انك تسوي نسخه من هذا الفورم
- 8:29انبوت بمعنى انه نيو فورم انبوت يصير له
- 8:32نسخه مستقله لما بتسوي علامه مساواه هي
- 8:35فعليا تمثل الباس باي ريفرنس وبالتالي
- 8:38كانه صار عندك مؤشرين لنفس المكان في
- 8:40الميموري فالتغيير على النيو فورم انبوت
- 8:42هو تغيير على الفورم انبوت وهذا الشيء غير
- 8:45مقبول من خلال المساواه لو سويت منه نسخه
- 8:48سويت اوبجكت مستقل وصرت اغير فيه من خلال
- 8:51المساواه ترى هذا شيء عادي طيب كيف بقدر
- 8:53اسوي منه نسخه بقدر نسوي نسخه من الاوبجكت
- 8:56اللي هي بنسميها الشالو كلون اللي هي
- 8:59النسخه السطحيه عن طريق اني استخدم ما
- 9:02يعرف بالسبري سنتاكس بمعنى اخر ممكن اجي
- 9:06اقول له النيو فورم انبوت ترى هو نفس
- 9:10الفورم انبوت تماما بحيث اني احطه بداخل
- 9:13اقواس الاوبجكت واحط ابله ري دوتس بهذا
- 9:16الشكل هذا معناه خذ لي الفورم انبوت وسوي
- 9:20لي نسخه مستقله تماما عند النيو فورم
- 9:23انبوت اذا ماك مستوعب كلامي اللي عم
- 9:25اتكلمه في الوقت الحالي فغالبا انك ماك
- 9:27مستوعب الفرق ما بين البا باي ريفرنس
- 9:29والباس باي فو فبنك تشوف الدرس اللي راح
- 9:32احط لك اياه في احد المصادر الخاصه بهذا
- 9:34الدرس بحيث انك ترجع له وبالتالي انا هيك
- 9:36بكون سويت نسخه بعدين لما عم اسوي علامه
- 9:39المساواه عم اعدل على ها النسخه طيب هل
- 9:41عادي اني اسوي مساواه لهذا المتغير هل هذا
- 9:45المتغير يمثل الستيت لا يمثل الستيت الشيء
- 9:48اللي يمثل الستيت هو اللي اجاني من يوز
- 9:50ستيت اللي هو الفورم انبوت لكن هذا صار
- 9:52نسخه مستقله منه وبالتالي عادي اني اجي
- 9:56اقول له نيو فورم انبوت دوت ايميل يساوي
- 9:58بشرط انه يكون نسخه مستقله من خلال هذا
- 10:01السبريد سنتاكس اللي هو الثري دوتس قبل
- 10:04الفورم ان بوتس لو سويت سيف الان ورجعت
- 10:06مره ثانيه على الايميل وكتبت شيء معين
- 10:09لاحظ انه عم يكتب لي اياه عم يغير لي
- 10:11الستيت بدون مشاكل فالان ايش اللي استفدته
- 10:14ماني محتاج اني اروح امشي على الفيلدز
- 10:17واحد واحد من الانش ستيت اقول له شوف ترى
- 10:19النيم كان كذا وخلي لي اياه كذا والاي كان
- 10:22كذا وخلي لي اياه كذا انا بس بدي اغير
- 10:24الايميل انا عم اقول له لا خلي لي
- 10:26الاوبجكت مثل ما هو بكل قيمه انسخ لي اياه
- 10:29بنسخه مستقله وهاي النسخه المستقله عد لي
- 10:31فيها الايميل فقط وبعدين سوي لي اياها ست
- 10:34لل ستيت بهذا الشكل طيب انا عارف اني طولت
- 10:37بس عشان اوضح لك الصوره كامله كيف وصلنا
- 10:40لهذا المكان فالان هذا الكود اصلا كله انا
- 10:42بقدر اختصره بدل ما اني اكتبه بهذا الشكل
- 10:45را اسوي له كومنت وترى انا بقدر اجي اقول
- 10:47له كالتالي اول له مباشره ست فورم انبوت
- 10:51وهذا السنتاكس راح تشوفه شائع جدا وافتح
- 10:54قوس لانه هذا اللي بيغير لي الستيت وهذا
- 10:56لازم يكون عباره عن اوبجيكت صح ما راح
- 10:59اقوله النيم كذا والاي كذا والايميل كذا
- 11:02لا راح اقول له خذ لي الفورم انبوت مثل ما
- 11:05هو مثل الفيلدز الموجوده فيه حطلي اياهم
- 11:08مثل ما هن تماما بعدين راح احط فاصله وبحد
- 11:11ايش الفيلدز تحديدا اللي بدي اغيرها فكل
- 11:14شيء عم اقول له انسخ لي ايا نسخ وبعدين
- 11:16حدد لي ايش الفيلدز اللي بدي اغيرها فراح
- 11:18اجي اقول له الايميل فقط هو اللي بتغير لي
- 11:20اياه بحيث يكون ايفينت دوت تارجت دوت فو
- 11:24بهذا الشكل فلو سويت سيف ترى هذا الكود هو
- 11:27نفس هذا الكود تمام
- 11:29بس بشكل مختصر لو رجعت مره ثانيه وعدلت
- 11:32على الايميل لاحظ انه عم يعدلي اه بدون
- 11:33مشاكل فنفس هذا الكود تماما انا بقدر اصير
- 11:37استخدمه في اي انبوت سواء من الانبوت
- 11:40الموجوده او اي انبوت جديد انا بسويه ماني
- 11:43محتاج هذا الشيء كله بجي بقوله ست فورم
- 11:46انبوت يساوي نفس الستيت الحاليه لكن نسخه
- 11:50منها وليس نفسها اني اكتب فورم انبوت بهذا
- 11:53الشكل بعدين فاصله لا لازم اسوي نسخه منها
- 11:56وبالتالي بستخدم السبريد سنتاكس اللي هو
- 11:59الثري دوتس هذا اللي بينسخ لي منها كل
- 12:01الكيز الموجوده تبع مين تبع الفورم انبوت
- 12:05ومنها راح اعدل عليه بحكم انه هذا الفيلد
- 12:09تبع الايج فراح اقول له الايج هو اللي راح
- 12:11يكون عباره عن الايفنت دوت تارجت دوت فو
- 12:15ونفس الشيء تماما بالنسبه للنيم راح اجي
- 12:18يقول له بنفس الطريقه تماما ست فورم انبوت
- 12:22بانك تنسخ لي كل الفيلدز الحاليه الموجوده
- 12:26في الفورم انبوت اللي هو عباره عن الستيت
- 12:29بس اللهم الكي اللي اسمه نيم روح عدلي
- 12:31اياه عشان يكون يعكس الايفنت دوت تارجت
- 12:35دوت value فلو سويت سيف الان ورجعت مره
- 12:38ثانيه راح اسوي ريفريش راح اعدل النيم
- 12:40تعدل عندي راح اعدل الايميل تعدل عندي
- 12:43وستيت عم تتغير كابكت كامل
- 12:46والايجو تعدل عندي وترى في كل تعديل اللي
- 12:50عم اسويه انا فعليا اني عم اسوي نسخه من
- 12:52هاي الستيت وارجع اعدل التعديلات اللي بدي
- 12:54اياها بعدين استدعي الداله اللي اسمها ست
- 12:57نيم لانه ها هي الطريقه المسموح فيها انها
- 12:59تشتغل اما اني اخذ نفس الاوبجكت واعدله
- 13:01مباشره هذا الشيء ما بينفع ها هي الطريقه
- 13:03اللي بتشتغل فيها الستيت في رياكت ايش
- 13:05استفدت لو جيت وسويت سبمت الان الاوبجكت
- 13:07كله جاهز عندي وماني محتاج اني امشي على
- 13:10كل الستيت فلاحظ كيف كان عندي اول كل
- 13:13انبوت في له ستيت بعدين قلت لا ها عباره
- 13:15عن مجموعه من الانبوت المجمعه مع بعض فليش
- 13:18ما اجمعهم باستيت واحد يمثل لي اوبجيكت
- 13:21بحيث انه كل كي يعكس لي انبوت معين موجوده
- 13:25عندي في ها الستيت وفي كل مره بتتغير القي
- 13:29قله غيرلي الكي اللي انا مهتم فيه تحديدا
- 13:31بينما كل الكيز السابقه انسخ لي اياهم
- 13:34نسخا سواء بالكيز تبعهم او بالقيم تبعهم
- 13:37عشان ما يتاثروا من خلال هذا التغيير وهيك
- 13:40جمعتهم كلهم في اوبجكت واحد صار جاهز اني
- 13:43اسوي فيه اي بي اي ريكويست او اسوي فيه اي
- 13:45شيء انا بدي اياه اتمنى ان شاء الله انه
- 13:46كان الشرح واضح ودائما وابدا اذا كان عندك
- 13:48سؤال وا استفسار لا تردد في كتابته في
- 13:50مجموعه رياكت على تليجرام او حتى في خانه
- 13:53التعليقات ونشوفكم ان شاء الله بالدرس
- 13:57الجاي
About this transcript
This page contains the full transcript of 27: حل مشكلة ال Object State في ال Form by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 2,348 words across 303 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.
What you can do with it
Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.
Free YouTube transcript tool
YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.