ধরা যাক আমার কাছে সরল বস্তুর একটি তালিকা রয়েছে this.state.listযা আমি তারপরে বাচ্চাদের একটি তালিকা রেন্ডার করতে ব্যবহার করতে পারি। এরপরে অবজেক্টটি toোকানোর সঠিক উপায় কী this.state.list?
নীচে কেবলমাত্র মনে হয় এটি কাজ করবে কারণ আপনি this.stateডকটিতে উল্লিখিত হিসাবে সরাসরি পরিবর্তন করতে পারবেন না ।
this._list.push(newObject):
this.setState({list: this._list});
এটা আমার কাছে কুরুচিপূর্ণ মনে হয়। একটি ভাল উপায় আছে কি?
উত্তর:
concat একটি নতুন অ্যারে প্রদান করে, তাই আপনি করতে পারেন
this.setState({list: this.state.list.concat([newObject])});
আর একটি বিকল্প হ'ল প্রতিক্রিয়াটির অপরিবর্তনীয়তা সহায়ক
var newState = React.addons.update(this.state, {
list : {
$push : [newObject]
}
});
this.setState(newState);
concatএকটি অ্যারে লাগে, তাই আপনি চান this.state.list.concat([newObject])।
concatতবে এটিকে একটি অ্যারেতে আবৃত করবে, তবে নিজেকে সুস্পষ্ট হতে অ্যারে যুক্ত করা ভাল: যদি আপনি পরবর্তী উপাদান হিসাবে [[1,2], [3,4]]যোগ করতে চান এবং [5,6]আপনাকে .concat([[5,6]])অন্য কিছু করতে হবে সাথে শেষ করব [[1,2], [3,4], 5, 6]।
Array.concatনিশ্চিতভাবেই অন্য একটি লাইব্রেরি যুক্ত করা যায়।
পরামিতি হিসাবে ফাংশন সহ সেটস্টেট () বলা যেতে পারে:
this.setState((state) => ({ list: state.list.concat(newObj) }))
বা ES5 এ:
this.setState(function(state) {
return {
list: state.list.concat(newObj)
}
})
this.setState((state) => ({ list: state.list.push(newObj) }))
NUMBER, যা listভেরিয়েবলের উপর সেট করা হবে
this.setState((state) => ({ list: [...state.list, newObj] }))
২০১ Update আপডেট করুন
ES6 এর সাহায্যে আপনি ব্যবহার করতে পারেন:
this.setState({ list: [...this.state.list, ...newObject] });
...[newObject]ঠিক হিসাবে একই newObject।
প্রতিক্রিয়া দস্তাবেজগুলি থেকে ( https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous ):
কারণ এই.পৃষ্ঠা এবং এটি.সেটটি অবিচ্ছিন্নভাবে আপডেট করা হতে পারে, আপনার পরবর্তী অবস্থার গণনার জন্য তাদের মানগুলিতে নির্ভর করা উচিত নয়।
পরিবর্তে আপনার এটি করা উচিত:
this.setState((prevState) => ({
contacts: prevState.contacts.concat([contact])
}));