اذهب إلى المحتوى

السؤال

Recommended Posts

  • 1
نشر

أهلا بك،

الكود عبارة عن مكون 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
نشر

مرحباً أحمد: 
هذا كود React.js 

  1. لديك صفحة ( component ) اسمها MessageScreen
  2. لديك متغير ( state ) اسمه messages والقيمة الإفتراضية له عبارة عن متغير آخر اسمه initialMessages ويقوم بتغيير قيمته في أي وقت باستخدام الدالة setMessage
  3. لديك متغير ( state ) اسمه refreshing والقيمة الإفتراضية له عبارة عن متغير آخر اسمه false ويقوم بتغيير قيمته في أي وقت باستخدام الدالة setRefreshing
  4. بالطبع هنا الصفحة هنا عبارة عن ( functionalComponent ) ولذلك يتم استخدام ال state عن طريق React Hooks
  5. لديك دالة تقوم بحذف عناصر من ال المتغير messages عن طريق الدالة setMessages باستخدام الدالة filter
  6. الدالة تقوم باستقبال parameter اسمه message وتقوم بحذف العنصر الذي يكون ال id خاصته مساوي لل id الذي سيكون في الرسالة التي تم استقبالها ( message )
  • الرجاء الإطلاع على الروابط في الإجابة ودراستها جيداً
  • 1
نشر

يعتمد هذا الكود على فهمك للعديد من الأساسيات المتعلقة ب React و ES6.

في السطرين الثاني و الثالث تم استخدام ما يسمى ب useState react hook. و ال state هي عبارة عن متغير يصف حالة التطبيق و يتحكم في المحتوى الذي يظهر للمستخدم.

أما عن الدالة handleDelete فهي تعمل كما يلي:

  • عند الضغط على زر الحذف الخاص برسالة ما  يتم استدعاء هذه الدالة و تمرير تلك الرسالة لها كمعامل
  • بعدها نقوم بعمل حلقة على جميع الرسائل الموجودة باستخدام الmethod filter و وظيفة filter هي الفلترة تماما مثل اسمها. حيث تقوم بعمل حلقة على جميع الرسائل و بعدها تقوم بإرجاع الرسائل عدا الرسالة التي نريد حذفها"التي تم تمريرها كمعامل للدالة handleDelete"
  •  بعد أن تنتهي عملية الفلترة نقوم بتحديث الرسائل باستخدام الدالة SetMessages التي تم تعريفها في السطر الثاني.

يمكنك قراءة المزيد عن:

  • ()filter من هنا 
  • ()useState من هنا
  •  React hooks من هنا
  • يمكنك أن تجد المزيد من المواضيع الأساسية هنا

 

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...