मेरे पास उपयोगकर्ता द्वारा जोड़े गए आइटमों की गतिशील सूची है। जब कोई उपयोगकर्ता सूची में पहले से मौजूद कोई आइटम जोड़ता है तो मैं डुप्लिकेटिंग से बचना चाहता हूं। मेरी सूची दिखती है

itemList = [ {itemId:1, name:"x", quantity:5}, {itemId:4, name:"y", quantity:2}]

तो अब यदि कोई उपयोगकर्ता मात्रा 2 के साथ आइटम x जोड़ता है, तो मैं चाहता हूं कि आइटम x वाला ऑब्जेक्ट पूरी नई ऑब्जेक्ट जोड़ने के बजाय मात्रा को 7 तक अपडेट करे। मैं पहले से मौजूद आइटम को प्राप्त करने के लिए खोज() विधि का उपयोग कर रहा हूं और इसे एक चर में संग्रहीत कर रहा हूं, itemObj वह आइटम है जिसे उपयोगकर्ता ने हाल ही में जोड़ा है।

let alrItem = state.itemList.find(
    (e) => e.itemId === itemObj.itemId
  );
let newItem = alrItem;
newItem.quantity += itemObj.quantity;

मैं इस नए आइटम को आइटम सूची में कैसे विलय करूं ताकि यह उस विशिष्ट आइटम की मात्रा को अपडेट कर सके?

2
robo 25 अक्टूबर 2020, 13:00

2 जवाब

सबसे बढ़िया उत्तर

आप जो कर रहे हैं वह वस्तु को itemList सरणी में ढूंढ रहा है और फिर सीधे राज्य को बदल रहा है। राज्य को सीधे उत्परिवर्तित नहीं किया जाना चाहिए।

.find() विधि का उपयोग करने के बजाय, सरणी पर पुनरावृति करने के लिए .map() विधि का उपयोग करें और नए आइटम की आईडी से मेल खाने वाले आइटम की मात्रा को अपडेट करें।

let updatedItemList = state.itemList.map((item) => {
   if (item.itemId === itemObj.itemId) {
      return { ...item, quantity: item.quantity + itemObj.quantity };
   }
   return item;
});

// update the state
setItemList(updatedItemList);

ध्यान दें कि यदि आइटम पहले से itemList में मौजूद नहीं है तो उपरोक्त कोड कुछ नहीं करेगा। आदर्श रूप से, आपको उस मामले को भी संभालना चाहिए जहां नया आइटम पहले से itemList में मौजूद नहीं है। इस मामले में, आपको केवल itemList में नया आइटम जोड़ना चाहिए।

इस मामले को संभालने के लिए, आपको केवल एक अतिरिक्त चर की आवश्यकता है जिसका उपयोग यह जानने के लिए किया जा सकता है कि .map() विधि के अंदर if स्थिति का मूल्यांकन सही है या नहीं।

let exists = false;

let updatedItemList = state.itemList.map((item) => {
   if (item.itemId === itemObj.itemId) {
      exists = true;
      return { ...item, quantity: item.quantity + itemObj.quantity };
   }
   return item;
});

// if the item isn't present in the list, add it in the "updatedItemList"
if (!exists) {
   updatedItemList.push(itemObj);
}

// update the state
setItemList(updatedItemList);
4
Yousaf 25 अक्टूबर 2020, 13:17
let itemList = [ {itemId:1, name:"x", quantity:5}, {itemId:4, name:"y", quantity:2}]
let itemObj = {itemId:1, name:"x", quantity:2}

const target = itemList.find(element =>
    element.itemId === itemObj.itemId
);

if (target) {
    target.quantity = target.quantity + itemObj.quantity;
} else {
    itemList.push(itemObj);
}

console.log('itemList: ' + JSON.stringify(itemList));

आउटपुट:

आइटम सूची: [{"आइटम आईडी": 1, "नाम": "एक्स", "मात्रा": 7}, {"आइटम आईडी": 4, "नाम": "वाई", "मात्रा": 2}]

0
Simon 25 अक्टूबर 2020, 13:16