नेस्टेड स्टेट को अपडेट करने के लिए अनिवार्य दृष्टिकोण

रिएक्ट में, स्टेट अपडेट अपरिवर्तनीय हैं। इसका मतलब यह है कि किसी नेस्टेड ऑब्जेक्ट या ऐरे को अपडेट करने के लिए, आप बस इसके गुणों को संशोधित नहीं कर सकते हैं और यूआई में परिवर्तनों को प्रतिबिंबित करने की उम्मीद नहीं कर सकते हैं। इसके बजाय, आपको एक नया ऑब्जेक्ट या ऐरे बनाना होगा जिसमें अपडेट किए गए मान शामिल हों और फिर इसे सेटस्टेट पर पास करें।

निम्नलिखित उदाहरण पर विचार करें, जहां हम इंडेक्स 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 पर आइटम। अंत में, हम नए आइटम ऐरे के साथ राज्य को अपडेट करते हैं।

यह दृष्टिकोण सीधा है और सरल राज्य अपडेट के लिए अच्छा काम करता है। हालाँकि, कई नेस्टेड ऑब्जेक्ट या सरणियों वाले जटिल स्थिति अपडेट के लिए यह बोझिल और त्रुटि-प्रवण हो सकता है।