प्रतिक्रिया में राज्य सरणी से आइटम हटाएं

Question

कहानी यह है कि मुझे बॉब, सैली और जैक को एक बॉक्स में रखने में सक्षम होना चाहिए। मैं बॉक्स से या तो निकाल सकता हूं। जब हटाया जाता है, तो कोई स्लॉट नहीं छोड़ा जाता है।

people = ["Bob", "Sally", "Jack"]

मुझे अब "बॉब" कहने की जरूरत है। नया सरणी होगा:

["Sally", "Jack"]

यहाँ मेरी प्रतिक्रिया घटक है:

...

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

...

यहां मैं आपको एक न्यूनतम कोड दिखाता हूं क्योंकि इसमें (onClick आदि) अधिक है। प्रमुख भाग सरणी से "बॉब" को हटाने, हटाने, नष्ट करने के लिए है लेकिन removePeople()जब बुलाया जाता है तो काम नहीं कर रहा है। कोई विचार? मैं इसे देख रहा था लेकिन मैं कुछ गलत कर रहा हूं क्योंकि मैं रिएक्ट का उपयोग कर रहा हूं।

Answer 1

किसी तत्व को किसी सरणी से निकालने के लिए, बस करें:

array.splice(index, 1);

आपके मामले में:

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},

Comments

मेरे मामले में यह था: array.splice(array, 1);धन्यवाद

— सिलार

array.splice(array, 1);? मुझे लगता है कि आपको इसे संपादित करने की आवश्यकता है..आपको विभिन्न चर का उपयोग करना चाहिए ...

— रेयन

प्रतिक्रिया का उपयोग करते समय, आपको आमतौर पर अपने राज्य को सीधे बदलने से बचना चाहिए। आपको एक नया एरियर बनाना चाहिए और उपयोग करना चाहिए setState()।

— iaretiga

मैं इस मामले में प्रसार ऑपरेटर के बजाय Array.from (this.state.items) का उपयोग करने की सलाह देता हूं। ऐसा इसलिए है क्योंकि Array.from विशेष रूप से इस उपयोग के लिए अभिप्रेत है।

— फ्रांसिस्को हॉज

छोटे सुझाव, अवांछित हटाने को रोकने के लिए सरणी splicing करने से पहले "इंडेक्स! = -1" के लिए एक चेक जोड़ें।

— रोबोबियर

Answer 2

प्रतिक्रिया का उपयोग करते समय, आपको कभी भी राज्य को सीधे नहीं बदलना चाहिए। यदि कोई वस्तु (याArray , जो कि एक ऑब्जेक्ट भी है) बदल गया है, तो आपको एक नई प्रति तैयार करनी चाहिए।

दूसरों ने उपयोग करने का सुझाव दिया है Array.prototype.splice(), लेकिन यह विधि एरे को बदल देती है, इसलिए इसका उपयोग न करना बेहतर हैsplice() रिएक्ट के साथ ।

Array.prototype.filter()एक नया सरणी बनाने के लिए उपयोग करने के लिए सबसे आसान :

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}

Comments

हां यह घोषणात्मक तरीका है। प्रचलित और एरो फ़ंक्शंस का उपयोग करते हुए एक वैकल्पिक विधि:this.setState(prevState => ({ people: prevState.people.filter(person => person !== e.target.value) }));

— जोश मोरेल

यह कभी नहीं उत्परिवर्ती राज्य के प्रतिक्रिया मुहावरे के प्रति स्वीकृत उत्तर होना चाहिए।

— लक्स

या सूचकांक का उपयोग कर:this.state.people.filter((_, i) => i !== index)

— mb21

स्लाइस है जो कि imutable है और बंटवारा है कि उत्परिवर्तनीय है

— Cassian

इस उत्तर के साथ समस्या यह है कि यदि आपके पास एक ही नाम के कई व्यक्ति हैं, तो आप इन सभी को हटा देंगे। सूचकांक का उपयोग उन मामलों में अधिक सुरक्षित है जहां आपके पास

— डुप्लिकेट

Answer 3

यहां ES6 का उपयोग करके हांग्जो पेट्रोव की प्रतिक्रिया पर एक मामूली बदलाव है

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}

Answer 4

.spliceसरणी से आइटम निकालने के लिए उपयोग करें । उपयोग करके delete, सरणी के अनुक्रमित में परिवर्तन नहीं किया जाएगा, लेकिन विशिष्ट सूचकांक का मूल्य होगाundefined

जोड़ () विधि मौजूदा तत्वों को दूर करने और / या नए तत्व जोड़कर एक सरणी की सामग्री बदल जाता है।

वाक्य - विन्यास: array.splice(start, deleteCount[, item1[, item2[, ...]]])

var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
  people.splice(index, 1);
}
console.log(people);

संपादित करें:

जैसा कि जस्टिन-अनुदान द्वारा बताया गया है , अंगूठे के एक नियम के रूप में, कभी भीthis.state सीधे म्यूट न करें, क्योंकि setState()बाद में कॉल करना आपके द्वारा किए गए म्यूटेशन को बदल सकता है। इलाज this.stateके रूप में अगर यह अपरिवर्तनीय थे।

विकल्प है, वस्तुओं की प्रतियों को बनाना और प्रतियों में this.stateहेरफेर करना, उन्हें उपयोग करके वापस करना setState()। Array#map, Array#filterआदि का इस्तेमाल किया जा सकता है।

this.setState({people: this.state.people.filter(item => item !== e.target.value);});

Comments

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

— जस्टिन ग्रांट

Answer 5

प्रतिक्रिया में राज्य सरणी से आइटम को हटाने का आसान तरीका:

जब बिना किसी कॉलिंग डेटाबेस और अपडेट लिस्ट से एपीआई को डिलीट किए उस समय आप इस फ़ंक्शन को डिलीट आईडी पास कर देते हैं और यह फंक्शन हटा दिया गया है तो लिस्ट से हटा दें

export default class PostList extends Component {
  this.state = {
      postList: [
        {
          id: 1,
          name: 'All Items',
        }, {
          id: 2,
          name: 'In Stock Items',
        }
      ],
    }


    remove_post_on_list = (deletePostId) => {
        this.setState({
          postList: this.state.postList.filter(item => item.post_id != deletePostId)
        })
      }
  
}

Comments

क्या आप बता सकते हैं कि यह इस तीन साल पुराने प्रश्न पर 8 अन्य उत्तरों से कैसे भिन्न है? समीक्षा से

— वाई हा ली

उपरोक्त कोड में यह डेटा के नए सरणी को फिर से बनाएगा लेकिन "idPostId" को छोड़ दें इस आईडी को

— ANKIT-DETROJA

उपयोगitem.post_id !== deletePostId

— निमिष गोयल

Answer 6

'स्प्लिस' का उपयोग करते हुए कुछ उत्तरों का उल्लेख किया गया, जो चांस स्मिथ ने कहा कि सरणी को उत्परिवर्तित कर दिया। मैं आपको विधि कॉल 'स्लाइस' ('स्लाइस' के लिए दस्तावेज़ यहाँ है) का उपयोग करने का सुझाव दूंगा, जो मूल सरणी की एक प्रति बनाते हैं।

Answer 7

यह बहुत सरल है पहले आप एक मूल्य निर्धारित करें

state = {
  checked_Array: []
}

अभी,

fun(index) {
  var checked = this.state.checked_Array;
  var values = checked.indexOf(index)
  checked.splice(values, 1);
  this.setState({checked_Array: checked});
  console.log(this.state.checked_Array)
}

Answer 8

आप उपयोग करना भूल गए setState। उदाहरण:

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
  this.setState({
    people: array
  })
},

लेकिन इसका उपयोग करना बेहतर है filterक्योंकि यह सरणी को म्यूट नहीं करता है। उदाहरण:

removePeople(e){
  var array = this.state.people.filter(function(item) {
    return item !== e.target.value
  });
  this.setState({
    people: array
  })
},

Answer 9

removePeople(e){
    var array = this.state.people;
    var index = array.indexOf(e.target.value); // Let's say it's Bob.
    array.splice(index,1);
}

अधिक जानकारी के लिए डॉक्टर को रिफर करें