النهج الحتمي لتحديث الحالة المتداخلة

في React، تحديثات الحالة غير قابلة للتغيير. هذا يعني أنه لتحديث كائن أو مصفوفة متداخلة، لا يمكنك ببساطة تعديل خصائصه وتوقع أن تنعكس التغييرات في واجهة المستخدم. بدلاً من ذلك، تحتاج إلى إنشاء كائن أو مصفوفة جديدة تتضمن القيم المحدثة ثم تمريرها إلى setState.

خذ بعين الاعتبار المثال التالي، حيث نريد تحديث خاصية اسم الكائن في الفهرس 1 في مجموعة العناصر المخزنة في الحالة:

handleChange: function (e) {
  // Make a copy of the items array
  let items = [...this.state.items];

  // Make a copy of the item object at index 1
  let item = {...items[1]};

  // Change the name property of the copied item
  item.name = 'New Name';

  // Replace the item at index 1 with the updated item
  items[1] = item;

  // Update the state with the new items array
  this.setState({items});
},

في هذا الأسلوب، نستخدم بناء الجملة المنتشر (...) لإنشاء نسخ سطحية من مصفوفة العناصر وكائن العنصر في الفهرس 1. ثم نقوم بتعديل خاصية اسم العنصر المنسوخ واستبدال العنصر في الفهرس 1 مع الإصدار المحدث. أخيرًا، نقوم بتحديث الحالة بمصفوفة العناصر الجديدة.

هذا الأسلوب واضح ومباشر ويعمل بشكل جيد لتحديثات الحالة البسيطة. ومع ذلك، يمكن أن تصبح مرهقة وعرضة للأخطاء بالنسبة لتحديثات الحالة المعقدة التي تتضمن كائنات أو صفائف متداخلة متعددة.