রাষ্ট্রের অ্যারেতে ধাক্কা দেওয়ার সঠিক উপায়

Question

আমার মনে হচ্ছে ডেটাটিকে একটি রাষ্ট্রের অ্যারেতে ঠেলাতে সমস্যা হচ্ছে। আমি এটি এইভাবে অর্জন করার চেষ্টা করছি:

this.setState({ myArray: this.state.myArray.push('new value') })

তবে আমি বিশ্বাস করি এটি ভুল পদ্ধতি এবং পরিবর্তনের কারণে সমস্যা সৃষ্টি করে?

Answer 1

অ্যারে ধাক্কা দৈর্ঘ্য ফেরত

this.state.myArray.push('new value')অ্যারের পরিবর্তে প্রসারিত অ্যারের দৈর্ঘ্য প্রদান করে। অ্যারে.প্রোটোটাইপ.পুশ () ।

আমি অনুমান করি আপনি প্রত্যাশিত মানটি অ্যারে হিসাবে প্রত্যাশা করবেন।

অপরিবর্তনীয়তা

দেখে মনে হচ্ছে এটি প্রতিক্রিয়াটির আচরণ নয়:

সেট.স্টেট () এর পরে কল করার পরে এই.স্টেটকে সরাসরি কখনও পরিবর্তন করুন না কেন আপনি তৈরি রূপান্তর প্রতিস্থাপন করতে পারে। এই স্টেটের সাথে এমন আচরণ করুন যেন তা পরিবর্তনযোগ্য নয়। প্রতিক্রিয়া । উপাদান ।

আমার ধারণা, আপনি এটি এমনটি করবেন (প্রতিক্রিয়াটির সাথে পরিচিত নন):

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })

Comments

যখন আমি console.log(this.state.myArray)এটি সবসময় একটি পিছনে। কোন ধারণা কেন?

— Si8

@ সি 8 ভাল, আমি দুর্ভাগ্যক্রমে খুব বেশি প্রতিক্রিয়া ব্যবহার করি না। তবে দস্তাবেজগুলি বলেছেন: setState()উপাদানগুলির স্থিতিতে পরিবর্তনকে চিহ্নিত করে এবং প্রতিক্রিয়া জানায় যে এই উপাদানটি এবং তার শিশুদের আপডেট হওয়া রাষ্ট্রের সাথে পুনরায় রেন্ডার করা দরকার। সুতরাং আমি অনুমান করি যে এটি ঠিক করার পরে ঠিক এই মুহুর্তে আপডেট হয়নি। আপনি দয়া করে একটি কোড উদাহরণ পোস্ট করতে পারেন, যেখানে আপনি দেখতে পাচ্ছেন আপনি কোন পয়েন্টটি সেট করছেন এবং লগ করছেন, দয়া করে?

— মার্টন ট্যামস

উত্তরের জন্য ধন্যবাদ. এটি অ্যাসিঙ্ক তাই এটি এখনই আপনাকে পরিবর্তনগুলি প্রদর্শন করবে না। তবে সেটস্টেটের একটি কলব্যাক রয়েছে যা সঠিক মানটি প্রদর্শন করে। আবার ধন্যবাদ.

— Si8

w3schools.com/jsref/jsref_concat_array.asp কনট্যাট দুটি অ্যারে .concat('new value');.concat(['new value']);

— সংশ্লেষ

@ মানোহররেডিপিডর্ডি অ-অ্যারে মানগুলি concat()পদ্ধতির জন্য পুরোপুরি বৈধ are দেখুন: বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে /

— জাভা স্ক্রিপ্ট

Answer 2

এস 6 ব্যবহার করে এটি এটির মতো করা যায়:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

সিনট্যাক্স ছড়িয়ে দিন

Comments

আমিও একই কাজ করেছি, দুটি ক্ষেত্রেই আমারআরির মান থাকতে পারে এবং তা হবে না। সুতরাং এটির যদি ইতিমধ্যে মান থাকে তবে এটি পুরোপুরি সূক্ষ্মভাবে কাজ করে। তবে কোনও তথ্য নেই..এটি 'নতুন মান' দিয়ে রাষ্ট্র আপডেট করে না। কোন দ্রাবক?

— ক্রিনা সনি

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

— আলিয়াকসান্দ্র সুসকভিচ

হাই দয়া করে আমার মন্তব্য @ তমাস এর উত্তরে উল্লেখ করুন। এটি কনসোলে একটি নমুনা ছিল। আমি আমার অ্যারে চেষ্টা করেছি: [... এটি.স্টেট.মিআরে, 'নতুন মান'] আমার রাষ্ট্রের অ্যারে আপডেট করার জন্য B তবে এটি কেবলমাত্র সর্বশেষ মানটির সাথে মিলিত হয়েছে you আপনি আমাকে সমাধানটি বলবেন?

— জেন্সি

@ জোহেন্সী আমি নিশ্চিত নই যে আপনার সমস্যাটি এই প্রশ্নের সাথে সম্পর্কিত কিনা, আলাদা প্রশ্ন জিজ্ঞাসা করার চেষ্টা করুন এবং প্রত্যাশিত আচরণটি বর্ণনা করুন এবং আমি আপনাকে সাহায্য করার চেষ্টা করব।

— আলিয়াকসান্দ্র সুস্কেভিচ

প্রতিক্রিয়া দস্তাবেজগুলি অনুসারে: "যেহেতু this.propsএবং this.stateঅবিচ্ছিন্নভাবে আপডেট করা হতে পারে, আপনার পরবর্তী অবস্থার গণনার জন্য তাদের মানগুলিতে নির্ভর করা উচিত নয়" " একটি অ্যারে সংশোধন করার ক্ষেত্রে, যেহেতু অ্যারে ইতিমধ্যে একটি সম্পত্তি হিসাবে উপস্থিত রয়েছে this.stateএবং আপনাকে নতুন মান সেট করার জন্য এর মান উল্লেখ করতে হবে, আপনার setState()যুক্তি হিসাবে পূর্ববর্তী অবস্থার সাথে একটি ফাংশন স্বীকার করে ফর্মটি ব্যবহার করা উচিত । উদাহরণ: this.setState(prevState => ({ myArray: [...this.state.myArray, 'new value'] }));দেখুন: reactjs.org/docs/...

— চরম বিশৃঙ্খল

Answer 3

কখনও রাজ্যকে সরাসরি রূপান্তর করার পরামর্শ দেওয়া হয়নি।

পরবর্তী প্রতিক্রিয়া সংস্করণগুলিতে প্রস্তাবিত পদ্ধতির প্রতিযোগিতামূলক পরিস্থিতি প্রতিরোধের জন্য রাজ্যগুলিকে সংশোধন করার সময় আপডেটের ফাংশনটি ব্যবহার করা হয়:

অ্যারের শেষে স্ট্রিং পুশ করুন

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

অ্যারের শুরুতে স্ট্রিং পুশ করুন

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

অ্যারের শেষে অবজেক্টটি পুশ করুন

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

অ্যারের শুরুর দিকে অবজেক্টটি পুশ করুন

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))

Comments

আমি এই উত্তরটি ব্যবহার করেছি। এটি অ্যারেতে প্রিপেন্ডিংয়ের জন্যও কাজ করে:this.setState((prevState) => ({ myArray: [values, ...prevState.myArray], }));

— গস

এটি গৃহীত উত্তরের চেয়ে অনেক বেশি ভাল পদ্ধতির এবং প্রতিক্রিয়া সংক্রান্ত নথিপত্রের প্রস্তাব অনুসারে এটি করে।

— ইয়ান জে মিলার

অবশ্যই এটি +1 কারণ অন্য উত্তরগুলি কলব্যাকগুলি ব্যবহারের সর্বশেষ নির্দেশিকা অনুসরণ করে না যদি নিজের সাথে রাষ্ট্র পরিবর্তন করে ating

— ম্যাট ফ্লেচার

রাষ্ট্র অ্যারেতে অন্য অ্যারে অবজেক্টগুলি কীভাবে যুক্ত করবেন?

— চাঁদনী

Answer 4

আপনার মোটেই রাষ্ট্র পরিচালনা করা উচিত নয়। কমপক্ষে, সরাসরি না। আপনি যদি আপনার অ্যারে আপডেট করতে চান তবে আপনি এই জাতীয় কিছু করতে চাইবেন।

var newStateArray = this.state.myArray.slice();
newStateArray.push('new value');
this.setState(myArray: newStateArray);

রাষ্ট্রীয় অবজেক্টে সরাসরি কাজ করা বাঞ্ছনীয় নয়। আপনি প্রতিক্রিয়াটির অপরিবর্তনযোগ্যতা সহায়কদেরও একবার দেখতে পারেন।

https://facebook.github.io/react/docs/update.html

Comments

আমি বিশ্বাস করি যে এই উত্তরটি সঠিক হতে হবে যদিও আমি জানতে চাইতাম যে আমরা কেন রাজ্যে পরিচালনা করতে পারি না, কেন এটি কেন কাম্য নয়। কিছুটা খননের পরে আমি নীচের প্রতিক্রিয়া টিউটোরিয়ালটি পেয়েছি - কেন অপ্রচলতা গুরুত্বপূর্ণ , যা অনুপস্থিত তথ্য পূরণ করতে সহায়তা করেছিল এবং টিউটোরিয়ালটি .slice()একটি নতুন অ্যারে তৈরি করতে এবং অপরিবর্তনশীলতা সংরক্ষণেও ব্যবহার করে। সাহায্যের জন্য ধন্যবাদ.

— বেবপসং

Answer 5

আপনি .concatনতুন ডেটা দিয়ে আপনার অ্যারের অনুলিপি তৈরি করতে পদ্ধতিটি ব্যবহার করতে পারেন :

this.setState({ myArray: this.state.myArray.concat('new value') })

তবে .concatঅ্যারে পাস করার সময় পদ্ধতির বিশেষ আচরণ থেকে সাবধান থাকুন - [1, 2].concat(['foo', 3], 'bar')ফলাফল হবে [1, 2, 'foo', 3, 'bar']।

Answer 6

এই কোডটি আমার পক্ষে কাজ করে:

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
  this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})

Comments

স্ট্যাক ওভারফ্লোতে স্বাগতম! দয়া করে কেবল উত্স কোড দিয়ে উত্তর দিবেন না। আপনার সমাধান কীভাবে কাজ করে সে সম্পর্কে একটি দুর্দান্ত বর্ণনা দেওয়ার চেষ্টা করুন। দেখুন: আমি কীভাবে ভাল উত্তর লিখব? । ধন্যবাদ

— সানুন ןɐ কিউপি

আমি চেষ্টা করেছিলাম কিন্তু কোন ফল হয় নি। এখানে আমার কোডfetch(`api.openweathermap.org/data/2.5/forecast?q=${this.searchBox.value + KEY} `) .then( response => response.json() ) .then( data => { this.setState({ reports: this.state.reports.push.apply(this.state.reports, data.list)}); });

— হেনরি

এবং আমি প্রথমে একটি খালি অ্যারে হিসাবে রাষ্ট্রের সূচনা করেছি this.state = { reports=[] }... পিএলএস আমি জানতে চাই যে আমি কী ভুল করছি

— হেনরি

@ হামিদ হোসেইনপুর

— হেনরি

Answer 7

প্রতিক্রিয়া-দেশীয়

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

data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}. 

Answer 8

নিম্নলিখিত পদ্ধতিতে আমরা অবজেক্টগুলি চেক এবং আপডেট করতে পারি

this.setState(prevState => ({
    Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));

Answer 9

এখানে আপনি এই জাতীয় পদক্ষেপের মতো বস্তুকে ঠেলাতে পারবেন না। আপনি স্বাভাবিক অ্যারেতে আপনার মতো ধাক্কা দিতে পারেন। এখানে আপনাকে রাষ্ট্র নির্ধারণ করতে হবে,

this.setState({ 
     myArray: [...this.state.myArray, 'new value'] 
})

Answer 10

আপনি যদি কেবলমাত্র রাষ্ট্রটিকে আপডেট করার চেষ্টা করছেন

   handleClick() {
        this.setState(
{myprop: this.state.myprop +1}
        })
    }

এই পদ্ধতির বিবেচনা করুন

   handleClick() {
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    }

মূলত প্রিপস্টেট আমাদের জন্য এটি লিখছে st