উপাদান অবস্থায় অ্যারে থেকে উপাদান সরানো

Question

আমি উপাদানটির অবস্থায় একটি অ্যারের থেকে উপাদানটি সরানোর সর্বোত্তম উপায়টি অনুসন্ধান করার চেষ্টা করছি। যেহেতু আমার this.stateপরিবর্তনশীলটি সরাসরি পরিবর্তন করা উচিত নয় , সুতরাং এখানে থাকা উপাদানগুলির চেয়ে অ্যারের থেকে উপাদান সরানোর জন্য আরও ভাল উপায় (আরও সংক্ষিপ্ত) হতে পারে ?:

  onRemovePerson: function(index) {
    this.setState(prevState => { // pass callback in setState to avoid race condition
      let newData = prevState.data.slice() //copy array from prevState
      newData.splice(index, 1) // remove element
      return {data: newData} // update state
    })
  },

ধন্যবাদ.

আপডেট

সেটস্টেটে কলব্যাক ব্যবহার করতে এটি আপডেট করা হয়েছে। বর্তমান অবস্থা আপডেট করার সময় এটি উল্লেখ করার সময় এটি করা উচিত।

Comments

প্রতিক্রিয়াটির সাথে ভাল কাজ করে এমন ফেসবুক থেকে ইমট্যটেবলজেএস একবার দেখুন। লিঙ্ক

— জোনাটান লুন্ডকভিস্ট মেডন

আপনার কোডে আমি কোনও ভুল দেখছি না। বাস্তবে এটি করা খুব মূ .় উপায়।

— দিমিতর দিমিত্রভ

Answer 1

আমি দেখেছি এটি করার সবচেয়ে পরিষ্কার উপায়টি হ'ল filter:

removeItem(index) {
  this.setState({
    data: this.state.data.filter((_, i) => i !== index)
  });
}

Comments

@ হুসিএন দ্য _কখনও কখনও অব্যক্ত যুক্তি উপস্থাপন করতে ব্যবহৃত হয়। এখানে এটি অ্যারের বর্তমান আইটেম।

— ক্রিসমাস

অ্যামেজিং। আমি সমস্ত সময়। ফিল্টার ব্যবহার করছি তবে এই পরিস্থিতিতে এটি কখনই ব্যবহার করার কথা ভাবা হয়নি। : ডি

— ডাক্ট

এটি পরিষ্কার কোড, তবে বড় অ্যারেগুলির জন্য, এই পদ্ধতিটি ধীর। হওয়ার কারণ, এটি ইতিমধ্যে নির্ধারিত বলে মনে হচ্ছে এমন একটি সূচি খুঁজে পেতে পুরো অ্যারের মধ্য দিয়ে যায় ops

— ম্যাট এলিস

@ ম্যাটেলিস যেহেতু রিঅ্যাক্টের স্টেট আপডেটগুলি যেভাবেই হোক অপরিবর্তনীয়, তাই কোনও অবস্থাতেই এটি অনুলিপি করার জন্য তালিকার আকারে আপনি ও (এন) ব্যয় করতে যাচ্ছেন। এটি যদি একটি উল্লেখযোগ্য পারফরম্যান্স হিট হত তবে আমি অবাক হব।

— এফ্রিয়ন

এমনকি অনিবার্যভাবে this.stateইনপুট হিসাবে মূল্যায়ন করার this.setState()পরামর্শ দেওয়া হয় না। এই বিষয়ে অফিসিয়াল প্রতিক্রিয়া ডক্সের রেফারেন্সের জন্য দয়া করে উপরে আমার উত্তরটি দেখুন।

— pscl

Answer 2

আপনি update()অপরিবর্তনযোগ্য সহায়কreact-addons-update ব্যবহার করতে পারেন , যা কার্যকরভাবে হুডের নীচে একই কাজ করে তবে আপনি যা করছেন তা ঠিক আছে।

this.setState(prevState => ({
  data: update(prevState.data, {$splice: [[index, 1]]})
}))

Comments

আপনি

— যেটির

react-addons-updateএখন অবচয় করা হয়েছে (2016)। immutability-helperপ্রতিস্থাপন হিসাবে উপলব্ধ। github.com/kolodny/immutability-helper এছাড়াও এই.সেটেটকে সরাসরি এই.সেটস্টেটের () ভিতরে পরিবর্তন না করার বিষয়ে নীচের আমার উত্তরটি দেখুন।

— pscl

Answer 3

আমি বিশ্বাস করি এর this.stateভিতরে উল্লেখ setState()করা নিরুৎসাহিত করা হয়েছে ( রাষ্ট্রীয় আপডেটগুলি মেইন অ্যাসিক্রোনাস হতে পারে )।

দস্তাবেজগুলি setState()একটি কলব্যাক ফাংশন ব্যবহার করার পরামর্শ দেয় যাতে আপডেটটি উপস্থিত হওয়ার সময় রানস্টাইমে প্রিস্টস্ট পাস হয়। সুতরাং এটি এটি দেখতে হবে:

ES6 ছাড়াই অ্যারে.প্রোটোটাইপ.ফিল্টার ব্যবহার করা

removeItem : function(index) {
  this.setState(function(prevState){
    return { data : prevState.data.filter(function(val, i) {
      return i !== index;
    })};
  });
}

ES6 তীর ফাংশন সহ অ্যারে.প্রোটোটাইপ.ফিল্টার ব্যবহার করা

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i !== index)
  }));
}

অপরিবর্তনীয়তা-সহায়ক ব্যবহার করে

import update from 'immutability-helper'
...
removeItem(index) {
  this.setState((prevState) => ({
    data: update(prevState.data, {$splice: [[index, 1]]})
  }))
}

স্প্রেড ব্যবহার করে

function removeItem(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

নোট করুন যে প্রতিটি উদাহরণে, ব্যবহৃত প্রযুক্তি নির্বিশেষে, this.setState()একটি কলব্যাক পাস হয়েছে, পুরানো কোনও অবজেক্টের উল্লেখ নয়this.state ;

Comments

এটি সঠিক উত্তর, ডেটা রূপান্তর না করার শক্তিটিও দেখুন

— ভিনি জেমস

বিভিন্ন কৌশল যুক্ত করে প্রিস্টেট কলব্যাক ব্যবহারের উদাহরণ।

— pscl

আমি যদি এইভাবে এটি করি? @ ব্যবহারকারী1628461 দ্বারা দেখানো কলব্যাক বিকল্পের পরিবর্তে this.setState({ data: [...this.state.data.slice(0, index), ...this.state.data.slice(index + 1)] }); ব্যবহার this.stateকরা কি ভুল prevState?

— টিবিরিউ ম্যাক্সিম

এটি সবচেয়ে ভাল সমাধান, যদিও সহজ নয়

— ডেভেলিয়া

ধন্যবাদ, একটি উপাদান এটি মুছে ফেলার পরিবর্তে মাঝখানে খুব দ্রুত আপডেট করা সম্ভব ব্যবহার করে, এটি আমার প্রয়োজন needed

— বৈভব বিশাল

Answer 4

ES6 স্প্রেড সিনট্যাক্স ব্যবহার করে রাজ্যের অ্যারে থেকে উপাদানটি সরানোর একটি উপায় এখানে is

onRemovePerson: (index) => {
  const data = this.state.data;
  this.setState({ 
    data: [...data.slice(0,index), ...data.slice(index+1)]
  });
}

Comments

ধন্যবাদ! এটি এটি করার সবচেয়ে প্রাকৃতিক উপায় বলে মনে হয়।

— ফিবিওমিয়া

Answer 5

আমি এখানে ছিমছাম করতে চাই যদিও এই প্রশ্নটি ইতিমধ্যে @ পিএসসিএল দ্বারা সঠিকভাবে উত্তর দেওয়া হয়েছে যদি অন্য কেউ আমার ইস্যুতে চালিত হয় সে ক্ষেত্রে। 4 টি পদ্ধতির মধ্যে আমি সংক্ষিপ্ততার এবং বাহ্যিক লাইব্রেরিতে নির্ভরতার অভাবের কারণে তীর ফাংশনগুলির সাথে es6 সিনট্যাক্সটি ব্যবহার করতে পছন্দ করেছি:

ES6 তীর ফাংশন সহ অ্যারে.প্রোটোটাইপ.ফিল্টার ব্যবহার করা

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i != index)
  }));
}

যেহেতু আপনি দেখতে পারেন আমি (সূচক ধরণ উপেক্ষা করার সামান্য পরিমার্জন প্রণীত !==করার !=কারণ আমার ক্ষেত্রে) আমি একটি স্ট্রিং মাঠ থেকে সূচক পুনরুদ্ধার করা হয়।

ক্লায়েন্টের পাশে কোনও উপাদান অপসারণ করার সময় আপনি যদি অদ্ভুত আচরণটি দেখছেন তবে আর একটি সহায়ক বিন্দু হ'ল উপাদানটির মূল হিসাবে অ্যারের সূচকটি কখনও ব্যবহার করা উচিত নয় :

// bad
{content.map((content, index) =>
  <p key={index}>{content.Content}</p>
)}

যখন কোনও পরিবর্তনের ক্ষেত্রে ভার্চুয়াল ডিওমের সাথে প্রতিক্রিয়া দেখা দেয়, তখন কী পরিবর্তন হয়েছে তা নির্ধারণ করার জন্য কীগুলি দেখবে। সুতরাং আপনি যদি সূচকগুলি ব্যবহার করছেন এবং অ্যারেতে একটি কম থাকে তবে এটি সর্বশেষটি সরিয়ে ফেলবে। পরিবর্তে, বিষয়বস্তুর আইডি এর কী হিসাবে ব্যবহার করুন।

// good
{content.map(content =>
  <p key={content.id}>{content.Content}</p>
)}

উপরেরটি সম্পর্কিত পোস্টের এই উত্তরটির একটি অংশ ।

সবাইকে শুভ কোডিং!

Answer 6

আপনি যদি এই উপাদানটি (সূচি ছাড়াই) মুছে ফেলতে চান তবে আপনি এই ফাংশনটি ব্যবহার করতে পারেন

removeItem(item) {
  this.setState(prevState => {
    data: prevState.data.filter(i => i !== item)
  });
}

Answer 7

উপরে ইফ্রিয়নের উত্তরের মন্তব্যে যেমন উল্লেখ করা হয়েছে, ফিল্টার () ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে বাড়তে পারে, কারণ এটি ইতিমধ্যে নির্ধারিত বলে মনে হয় এমন কোনও সূচকের সন্ধান করতে লুপ হয়। এটি একটি পরিষ্কার, কিন্তু অদক্ষ সমাধান।

বিকল্প হিসাবে কেউ কেবল পছন্দসই উপাদানটিকে 'টুকরো টুকরো' করে টুকরো টুকরো টুকরো টুকরো টানতে পারে।

var dummyArray = [];    
this.setState({data: dummyArray.concat(this.state.data.slice(0, index), this.state.data.slice(index))})

আশাকরি এটা সাহায্য করবে!

Answer 8

আপনি এক লাইনের সহায়ক ফাংশন দিয়ে কোডটি আরও পঠনযোগ্য করে তুলতে পারেন:

const removeElement = (arr, i) => [...arr.slice(0, i), ...arr.slice(i+1)];

তারপরে এটির মতো ব্যবহার করুন:

this.setState(state => ({ places: removeElement(state.places, index) }));

Answer 9

কেবলমাত্র একটি পরামর্শ, আপনার কোডের পরিবর্তে let newData = prevState.dataআপনি স্প্রে ব্যবহার করতে পারেন যা ES6 তে প্রবর্তিত যা আপনি let newData = ...prevState.data অ্যারে অনুলিপি করার জন্য ব্যবহার করতে পারেন

তিনটি বিন্দু ... স্প্রেড অপারেটরগুলি বা বিশ্রামের পরামিতিগুলি উপস্থাপন করে ,

এটি একটি অ্যারে এক্সপ্রেশন বা স্ট্রিং বা যে কোনও কিছু যা পুনরাবৃত্তি হতে পারে এমন জায়গায় প্রসারিত হতে পারে যেখানে ফাংশন কলগুলির জন্য শূন্য বা আরও বেশি যুক্তি বা অ্যারের জন্য উপাদানগুলির প্রত্যাশিত।

অতিরিক্ত হিসাবে আপনি নিম্নলিখিত সঙ্গে অ্যারে থেকে আইটেম মুছতে পারেন

onRemovePerson: function(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

আশা করি এর অবদান !!

Answer 10

এটি করার সহজ উপায় এখানে:

removeFunction(key){
  const data = {...this.state.data}; //Duplicate state.
  delete data[key];                  //remove Item form stateCopy.
  this.setState({data});             //Set state as the modify one.
}

আশা করি এটা সাহায্য করবে!!!

Comments

বোঝাতে কি যত্ন?

— টিবেরিউ ম্যাক্সিম

আমি মনে করি এটি কারণ deleteআইটেম সরিয়ে দেয় তবে সূচিগুলি আপডেট হয় না এবং তাই নিয়মিত প্রয়োজনের জন্য এটি ভাল পদ্ধতির হবে না।

— কুনোক