इसलिए मेरे पास स्टोर करने के लिए एक आइटम जोड़ने के लिए यह बटन है, आप एक से अधिक नहीं जोड़ सकते हैं, लेकिन जब मैं दो बार या उससे अधिक बटन पर क्लिक करता हूं तो यह दो घटकों को दो बार फिर से प्रस्तुत करता है मैंने मूल्य को याद रखने के लिए उपयोग मेमो का उपयोग करने का प्रयास किया लेकिन यह काम नहीं करेगा और प्राप्त करें e.target से (लक्ष्य) अपरिभाषित है

const handleAdd = useMemo((e) => { 
  let newItem = {id : e.target.name, price: e.target.value, title: e.target.title, contity: 1} 
  item.push(newItem)
  const unique = Array.from(new Set(item.map(i => i.id))).map(id =>{return item.find(i => i.id === id)})
  setItem(unique)
}),[item])

इस अनावश्यक रेंडर से बचने के लिए उपयोग मेमो या किसी अन्य विचार के लिए कोई समाधान ..

0
ripouu 23 नवम्बर 2020, 23:00

2 जवाब

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

यह इनमें से किसी भी फैंसी हुक के बिना किया जा सकता है। useMemo या useCallback का उपयोग कब करना है और हमें इसकी अधिकांश समय आवश्यकता क्यों नहीं है, इस बारे में एक बढ़िया लेख यहां दिया गया है: https://kentcdodds.com/blog/usememo-and-usecallback

आपका कोड आसानी से जांच सकता है कि आइटम इसे अपडेट करने का प्रयास करने से पहले सरणी में पहले से मौजूद है या नहीं:

const handleAdd = (e) => { 
  const newId = e.target.name
  const itemFound = item.find((i) => i.id === newId)

  if (!itemFound) {
    const newItem = {id : e.target.name, price: e.target.value, title: e.target.title, contity: 1} 
    // Using spread to avoid mutability
    const updatedItem = [...item, newItem]
    setItem(updatedItem)
  }
}
1
Bruno Monteiro 23 नवम्बर 2020, 23:37
  • ईवेंट को बटन, इनपुट आदि से संभालने के लिए - useCallback हुक का उपयोग करें।

  • आप अपने हुक के अंदर setItem ट्रिगर करते हैं और यह फिर से प्रस्तुत करने का कारण बनता है। अपने हुक के अंदर कंडीशन जोड़ें और setItem तभी ट्रिगर करें जब आईडी की जरूरत हो।

1
Serega Marchenko 23 नवम्बर 2020, 23:29