Ahmed Sawy نشر 9 سبتمبر 2020 أرسل تقرير نشر 9 سبتمبر 2020 (معدل) تم التعديل في 9 سبتمبر 2020 بواسطة Ahmed Sawy 1 اقتباس
1 Mohammed Ahmed13 نشر 9 سبتمبر 2020 أرسل تقرير نشر 9 سبتمبر 2020 أهلا بك، الكود عبارة عن مكون React تم تطويره باستخدام أسلوب الـ Hooks والتي تمكنك من تخزين بيانات داخل المكونات التي تستعمل الدوال Functions بدلاً عن الـ Class. في البداية تم تعريف عدد من المتغيرات بالصورة التالية: const [messages, setMessages] = useState(initialMessages); const [refreshing, setRefreshing] = useState(false); يتم تمرير القيمة الأولية لمتغير البيانات للدالة الخاصة بـ useState والتي هي initialMessages لمتغير messages و false لمتغير refreshing. والدالة تقوم بإرجاع متغيرين الأول هو المتغير نفسه الذي يتم فيه تخزين البيانات وهنا هما messages, refreshing والآخر عبارة عن دالة يمكن إستعمالها لتحديث قيمة المتغير وهما setMessages, setRefreshing. بعدها تم تعريف دالة داخل المكون تختص بحذف الرسائل داخل المتغير messages الذي تم تعريفه سابقاً، وهو مصفوفة Array محتوية على عدد من الكائنات Objects تمثل الرسائل بالشكل التالي: const handleDelete = (message) => { setMessages(messages.filter(m => m.id !== message.id)); } داخل كل كائن بمصفوفة messages توجد id مميزة للرسالة وعند الرغبة في حذف رسالة معينة تستعمل هذه الـ id بحيث يتم عمل تصفية Filter لعناصر المصفوفة جميعاً من خلال الشرط: m.id !== message.id أي يتم إبقاء جميع الرسائل ماعدا الرسالة ذات الـ id المراد حذفها. ومن ثم أخيراً يتم تحديث الرسائل من خلال استخدام الدالة setMessages. 1 اقتباس
1 Mohammed Saber6 نشر 9 سبتمبر 2020 أرسل تقرير نشر 9 سبتمبر 2020 مرحباً أحمد: هذا كود React.js لديك صفحة ( component ) اسمها MessageScreen لديك متغير ( state ) اسمه messages والقيمة الإفتراضية له عبارة عن متغير آخر اسمه initialMessages ويقوم بتغيير قيمته في أي وقت باستخدام الدالة setMessage لديك متغير ( state ) اسمه refreshing والقيمة الإفتراضية له عبارة عن متغير آخر اسمه false ويقوم بتغيير قيمته في أي وقت باستخدام الدالة setRefreshing بالطبع هنا الصفحة هنا عبارة عن ( functionalComponent ) ولذلك يتم استخدام ال state عن طريق React Hooks لديك دالة تقوم بحذف عناصر من ال المتغير messages عن طريق الدالة setMessages باستخدام الدالة filter الدالة تقوم باستقبال parameter اسمه message وتقوم بحذف العنصر الذي يكون ال id خاصته مساوي لل id الذي سيكون في الرسالة التي تم استقبالها ( message ) الرجاء الإطلاع على الروابط في الإجابة ودراستها جيداً 1 اقتباس
1 Yomna Raouf نشر 9 سبتمبر 2020 أرسل تقرير نشر 9 سبتمبر 2020 يعتمد هذا الكود على فهمك للعديد من الأساسيات المتعلقة ب React و ES6. في السطرين الثاني و الثالث تم استخدام ما يسمى ب useState react hook. و ال state هي عبارة عن متغير يصف حالة التطبيق و يتحكم في المحتوى الذي يظهر للمستخدم. أما عن الدالة handleDelete فهي تعمل كما يلي: عند الضغط على زر الحذف الخاص برسالة ما يتم استدعاء هذه الدالة و تمرير تلك الرسالة لها كمعامل بعدها نقوم بعمل حلقة على جميع الرسائل الموجودة باستخدام الmethod filter و وظيفة filter هي الفلترة تماما مثل اسمها. حيث تقوم بعمل حلقة على جميع الرسائل و بعدها تقوم بإرجاع الرسائل عدا الرسالة التي نريد حذفها"التي تم تمريرها كمعامل للدالة handleDelete" بعد أن تنتهي عملية الفلترة نقوم بتحديث الرسائل باستخدام الدالة SetMessages التي تم تعريفها في السطر الثاني. يمكنك قراءة المزيد عن: ()filter من هنا ()useState من هنا React hooks من هنا يمكنك أن تجد المزيد من المواضيع الأساسية هنا 1 اقتباس
السؤال
Ahmed Sawy
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.