আমার নিম্নলিখিত অবস্থা রয়েছে:
this.setState({ selected: { id: 1, name: 'Foobar' } }); তারপরে আমি রাষ্ট্রটি আপডেট করি:
this.setState({ selected: { name: 'Barfoo' }});setStateমনে হয় যেহেতু মার্জ করার জন্য আমি এটিটি আশা করব:
{ selected: { id: 1, name: 'Barfoo' } }; তবে পরিবর্তে এটি আইডি খায় এবং রাষ্ট্রটি হ'ল:
{ selected: { name: 'Barfoo' } }; এই প্রত্যাশিত আচরণ এবং কোনও নেস্টেড স্টেট অবজেক্টের কেবলমাত্র একটি সম্পত্তি আপডেট করার সমাধান কী?
উত্তর:
আমি মনে setState()করি পুনরাবৃত্ত মার্জ করে না।
আপনি this.state.selectedনতুন রাষ্ট্র তৈরি করতে বর্তমান অবস্থার মানটি ব্যবহার করতে পারেন এবং তারপরে কল setState()করতে পারেন:
var newSelected = _.extend({}, this.state.selected);
newSelected.name = 'Barfoo';
this.setState({ selected: newSelected });রাষ্ট্রের অগভীর অনুলিপি তৈরি করে রাজ্যের _.extend()বিদ্যমান selectedঅংশে পরিবর্তন রোধ করতে আমি এখানে ফাংশন ফাংশন (আন্ডারস্কোর.জেএস লাইব্রেরি থেকে) ব্যবহার করেছি ।
আরেকটি সমাধান setStateRecursively()হ'ল এটি লিখতে যা কোনও নতুন রাজ্যে পুনরাবৃত্ত হয়ে যায় এবং তারপরে replaceState()এটি কল করে:
setStateRecursively: function(stateUpdate, callback) {
var newState = mergeStateRecursively(this.state, stateUpdate);
this.replaceState(newState, callback);
}this.setState({ selected: { ...this.state.selected, name: 'barfoo' } })this.setState({ selected: _extends({}, this.state.selected, { name: 'barfoo' }) });
underscore/ lodash। দয়া করে এটির নিজের উত্তরে এটি স্পিন করুন।
this.state অগত্যা আপ-টু-ডেট নয় । আপনি প্রসারিত পদ্ধতিটি ব্যবহার করে অপ্রত্যাশিত ফলাফল পেতে পারেন। আপডেট ফাংশনটিতে পাস করা setStateসঠিক সমাধান।
অপ্রত্যাশিত সাহায্যকারীদের সম্প্রতি React.addons এ যুক্ত করা হয়েছিল, সুতরাং সেই সাথে আপনি এখন এর মতো কিছু করতে পারেন:
var newState = React.addons.update(this.state, {
selected: {
name: { $set: 'Barfoo' }
}
});
this.setState(newState);React.addons.update()পদ্ধতিটি হ্রাস পেয়েছে তবে প্রতিস্থাপন লাইব্রেরি github.com/kolodny/immutability-helper এ একটি সমতুল্য update()ফাংশন রয়েছে ।
যেহেতু উত্তরগুলির মধ্যে অনেকগুলি নতুন তথ্যগুলিতে মার্জ করার জন্য ভিত্তি হিসাবে বর্তমান অবস্থা ব্যবহার করে, তাই আমি উল্লেখ করতে চেয়েছিলাম যে এটি ভেঙে যেতে পারে। রাজ্যের পরিবর্তনগুলি সারিবদ্ধ, এবং অবিলম্বে কোনও উপাদানগুলির রাষ্ট্রীয় অবজেক্টটি সংশোধন করবেন না। সারিটি প্রক্রিয়া করার আগে রাষ্ট্রীয় ডেটা উল্লেখ করা সেইজন্য আপনাকে বাসি ডেটা দেবে যা সেটস্টেটে আপনার মুলতুবি পরিবর্তনগুলি প্রতিফলিত করে না। ডক্স থেকে:
সেটস্টেট () অবিলম্বে এই.স্টেটকে রূপান্তরিত করে না তবে একটি মুলতুবি থাকা অবস্থায় অবস্থিতি স্থানান্তর তৈরি করে। এই পদ্ধতিটি কল করার পরে এটি.স্টেট অ্যাক্সেস করা সম্ভাব্যভাবে বিদ্যমান মানটি ফিরিয়ে আনতে পারে।
এর অর্থ সেটসেটে পরবর্তী কলগুলিতে রেফারেন্স হিসাবে "বর্তমান" অবস্থা ব্যবহার করা অবিশ্বাস্য। উদাহরণ স্বরূপ:
যদি আপনাকে বর্তমান অবস্থা ব্যবহার করতে হয় (যেমন কোনও নেস্টেড অবজেক্টে ডেটা মার্জ করার জন্য), সেটস্টেট বিকল্পভাবে কোনও ফাংশনটিকে কোনও বস্তুর পরিবর্তে আর্গুমেন্ট হিসাবে গ্রহণ করে; ফাংশনটি পূর্বের কোনও আপডেটের পরে রাষ্ট্র হিসাবে ডাকা হয় এবং রাষ্ট্রটিকে আর্গুমেন্ট হিসাবে পাস করে - সুতরাং এটি পূর্ববর্তী পরিবর্তনের প্রতি শ্রদ্ধার জন্য গ্যারান্টিযুক্ত পারমাণবিক পরিবর্তনগুলি করতে ব্যবহার করা যেতে পারে।
this.state, যখন আপনি এটি অ্যাক্সেস করবেন তখন বাসি (বা বরং মুলতুবি থাকা আপডেট) থাকতে পারে।
আমি অন্য লাইব্রেরি ইনস্টল করতে চাইনি তাই এখানে আরও একটি সমাধান রয়েছে।
পরিবর্তে:
this.setState({ selected: { name: 'Barfoo' }});পরিবর্তে এটি করুন:
var newSelected = Object.assign({}, this.state.selected);
newSelected.name = 'Barfoo';
this.setState({ selected: newSelected });বা, মন্তব্যগুলিতে @ আইসিসি 97-কে ধন্যবাদ, আরও বেশি সংক্ষিপ্তভাবে তবে তর্কসাপেক্ষভাবে কম পাঠযোগ্য:
this.setState({ selected: Object.assign({}, this.state.selected, { name: "Barfoo" }) });এছাড়াও, স্পষ্ট করে বলতে গেলে, এই উত্তরটি @bgannonpl উপরে উল্লিখিত উদ্বেগগুলির কোনও লঙ্ঘন করে না।
this.setState({ selected: Object.assign(this.state.selected, { name: "Barfoo" }));
Object.assign(a, b)থেকে অ্যাট্রিবিউটস গ্রহণ করে b, এগুলিতে সন্নিবেশ / ওভাররাইট করে aএবং তারপরে ফিরে আসে a। আপনি যদি সরাসরি রাজ্যে পরিবর্তন করেন তবে লোকেদের প্রতিক্রিয়া জানান।
{}প্রথম আর্গুমেন্ট হিসাবে: this.setState({ selected: Object.assign({}, this.state.selected, { name: "Barfoo" }) });। এটি আসল অবস্থাকে পরিবর্তিত করে না।
@ বিগননপল উত্তরের উপর ভিত্তি করে পূর্ববর্তী রাষ্ট্রটি সংরক্ষণ করা:
লোডাশ উদাহরণ:
this.setState((previousState) => _.merge({}, previousState, { selected: { name: "Barfood"} }));এটি সঠিকভাবে কাজ করেছে কিনা তা পরীক্ষা করতে, আপনি দ্বিতীয় প্যারামিটার ফাংশন কলব্যাক ব্যবহার করতে পারেন:
this.setState((previousState) => _.merge({}, previousState, { selected: { name: "Barfood"} }), () => alert(this.state.selected));অন্য বৈশিষ্ট্যগুলি বাতিল করে দেওয়ার mergeকারণে আমি ব্যবহার করেছি extend।
অপরিবর্তনীয় উদাহরণটির প্রতিক্রিয়া :
import update from "react-addons-update";
this.setState((previousState) => update(previousState, {
selected:
{
name: {$set: "Barfood"}
}
});অবস্থা এই ধরনের জন্য আমার সমাধান ব্যবহার করার মত অন্য উত্তর, নির্দিষ্ট হয় অপরিবর্তনীয়তা সাহায্যকারী ।
যেহেতু গভীরতার সাথে রাজ্য নির্ধারণ করা একটি সাধারণ পরিস্থিতি, তাই আমি ফলোভিং মিক্সিন তৈরি করেছি:
var SeStateInDepthMixin = {
setStateInDepth: function(updatePath) {
this.setState(React.addons.update(this.state, updatePath););
}
};এই মেশিনটি আমার বেশিরভাগ উপাদানগুলিতে অন্তর্ভুক্ত থাকে এবং আমি সাধারণত setStateসরাসরি আর ব্যবহার করি না ।
এই মেশিনের সাহায্যে কাঙ্ক্ষিত প্রভাব অর্জনের জন্য আপনাকে যা করতে হবে তা হ'ল ফাংশনটি setStateinDepthনিম্নলিখিত উপায়ে কল করা :
setStateInDepth({ selected: { name: { $set: 'Barfoo' }}})আরও তথ্যের জন্য:
setStateinDepthগঠনটিতে অপ্রয়োজনীয় সহায়তা সহায়ক ডকুমেন্টেশন দেখতে পাস হয়েছিল ।this.state.test.twoআপনি this.state.test.oneব্যবহার আপডেট করার পরেও সেখানে থাকবে setStateInDepth({test: {one: {$set: 'new-value'}}})। প্রতিক্রিয়াটির সীমিত setStateক্রিয়াকলাপটি পেতে আমি এই কোডটি আমার সমস্ত উপাদানগুলিতে ব্যবহার করি ।
this.state.testএকটি অ্যারে হিসাবে শুরু । অবজেক্টে পরিবর্তন করা, এটি সমাধান করা।
আমি এস classes ক্লাস ব্যবহার করছি, এবং আমি আমার শীর্ষ রাজ্যের বেশ কয়েকটি জটিল বস্তুর সাথে শেষ করে আমার মূল উপাদানটিকে আরও মডুলার করার চেষ্টা করছিলাম, তাই আমি রাজ্যটিকে শীর্ষাংশে রাখার জন্য একটি সাধারণ শ্রেণির মোড়ক তৈরি করেছি তবে আরও স্থানীয় যুক্তির অনুমতি দিয়েছি ।
মোড়কের ক্লাসটি তার কনস্ট্রাক্টর হিসাবে একটি ফাংশন নেয় যা মূল উপাদান রাষ্ট্রের উপর একটি সম্পত্তি সেট করে।
export default class StateWrapper {
constructor(setState, initialProps = []) {
this.setState = props => {
this.state = {...this.state, ...props}
setState(this.state)
}
this.props = initialProps
}
render() {
return(<div>render() not defined</div>)
}
component = props => {
this.props = {...this.props, ...props}
return this.render()
}
}তারপরে উপরের রাজ্যের প্রতিটি জটিল সম্পত্তির জন্য, আমি একটি স্টেট র্যাপড ক্লাস তৈরি করি। আপনি এখানে কন্সট্রাক্টরে ডিফল্ট প্রপস সেট করতে পারেন এবং ক্লাসটি শুরু করা হলে সেগুলি সেট করা হবে, আপনি মানগুলির জন্য স্থানীয় রাষ্ট্রটি উল্লেখ করতে পারেন এবং স্থানীয় রাষ্ট্র নির্ধারণ করতে পারেন, স্থানীয় ফাংশনগুলি উল্লেখ করতে পারেন, এবং এটি শৃঙ্খলা পেরিয়ে যেতে পারেন:
class WrappedFoo extends StateWrapper {
constructor(...props) {
super(...props)
this.state = {foo: "bar"}
}
render = () => <div onClick={this.props.onClick||this.onClick}>{this.state.foo}</div>
onClick = () => this.setState({foo: "baz"})
}সুতরাং আমার শীর্ষ স্তরের উপাদানটির কেবল প্রতিটি শ্রেণিকে এটি শীর্ষ স্তরের রাষ্ট্রীয় সম্পত্তি, একটি সরল রেন্ডার এবং ক্রস-উপাদানকে যোগাযোগ করে এমন কোনও ফাংশন সেট করার জন্য কনস্ট্রাক্টর দরকার।
class TopComponent extends React.Component {
constructor(...props) {
super(...props)
this.foo = new WrappedFoo(
props => this.setState({
fooProps: props
})
)
this.foo2 = new WrappedFoo(
props => this.setState({
foo2Props: props
})
)
this.state = {
fooProps: this.foo.state,
foo2Props: this.foo.state,
}
}
render() {
return(
<div>
<this.foo.component onClick={this.onClickFoo} />
<this.foo2.component />
</div>
)
}
onClickFoo = () => this.foo2.setState({foo: "foo changed foo2!"})
}আমার উদ্দেশ্যগুলির জন্য বেশ ভালভাবে কাজ করে মনে হচ্ছে, মনে রাখবেন যদিও আপনি শীর্ষ স্তরের উপাদানগুলিতে মোড়ানো উপাদানগুলিতে যে সম্পত্তিগুলি অর্পণ করেছেন তার রাজ্যটি পরিবর্তন করতে পারবেন না কারণ প্রতিটি মোড়ানো উপাদান তার নিজস্ব রাজ্য ট্র্যাক করছে তবে উপরের উপাদানটিতে রাষ্ট্র আপডেট করছে প্রতিটি সময় এটি পরিবর্তন।
এই এখনকার মতো,
যদি পরবর্তী রাজ্যটি পূর্বের রাজ্যের উপর নির্ভর করে তবে আমরা পরিবর্তে আপডেটকারী ফাংশন ফর্মটি ব্যবহার করার পরামর্শ দিই:
ডকুমেন্টেশন অনুসারে https://reactjs.org/docs/react-component.html#setstate :
this.setState((prevState) => {
return {quantity: prevState.quantity + 1};
});সম্পাদনা: এই সমাধানটি স্প্রেড সিনট্যাক্স ব্যবহার করতে ব্যবহৃত হয় । লক্ষ্যটি কোনও বিষয়বস্তু উল্লেখ ছাড়াই একটি বিষয় তৈরি করা হয়েছিল prevState, যাতে এটি prevStateসংশোধন করা যায় না। তবে আমার ব্যবহারে, prevStateকখনও কখনও পরিবর্তিত হতে পারে। সুতরাং, পার্শ্ব প্রতিক্রিয়া ছাড়াই নিখুঁত ক্লোনিংয়ের জন্য, আমরা এখন prevStateJSON এ রূপান্তর করি এবং তারপরে আবার ফিরে আসি। (জেএসএন ব্যবহার করার অনুপ্রেরণা এমডিএন থেকে এসেছে ))
মনে রাখবেন:
setState(prevState => stateChange)ধাপ
state যা আপনি পরিবর্তন করতে চানপদক্ষেপ 3 এবং 4 এক লাইনে একত্রিত করা যেতে পারে।
this.setState(prevState => {
var newSelected = JSON.parse(JSON.stringify(prevState.selected)) //1
newSelected.name = 'Barfoo'; //2
var update = { selected: newSelected }; //3
return update; //4
});this.setState(prevState => {
var selected = JSON.parse(JSON.stringify(prevState.selected)) //1
selected.name = 'Barfoo'; //2
return { selected }; //3, 4
});এটি দুর্দান্তভাবে প্রতিক্রিয়া নির্দেশিকা অনুসরণ করে। একই প্রশ্নের উত্তরে এক্সেলের উত্তরের ভিত্তিতে ।
আমরা প্রাথমিকভাবে রাজ্য সেট
this.setState({ selected: { id: 1, name: 'Foobar' } });
//this.state: { selected: { id: 1, name: 'Foobar' } }আমরা রাষ্ট্রের অবজেক্টের কিছু স্তরে একটি সম্পত্তি পরিবর্তন করছি:
const { selected: _selected } = this.state
const selected = { ..._selected, name: 'Barfoo' }
this.setState({selected})
//this.state: { selected: { id: 1, name: 'Barfoo' } }প্রতিক্রিয়া স্থিতি পুনরাবৃত্ত মার্জটি সম্পাদন করে না setState আশা করে যে একই সময়ে স্থানে থাকা রাষ্ট্র সদস্য আপডেটগুলি থাকবে না। আপনি নিজেই বদ্ধ বস্তু / অ্যারে নিজেকে অনুলিপি করতে হবে (অ্যারে.স্লাইস বা অবজেক্ট.স্যাসাইন সহ) বা নিবেদিত লাইব্রেরিটি ব্যবহার করতে হবে।
এটার মত. নেস্টেডলিংক সরাসরি যৌগিক প্রতিক্রিয়া স্থিতি পরিচালনা করার পক্ষে সমর্থন করে।
this.linkAt( 'selected' ).at( 'name' ).set( 'Barfoo' );এছাড়াও, selectedবা এর লিঙ্কটি selected.nameএকক প্রপ হিসাবে সর্বত্র পাস করা যেতে পারে এবং এর সাথে সেখানে পরিবর্তন করা যেতে পারে set।
আপনি কি প্রাথমিক অবস্থা স্থির করেছেন?
আমি উদাহরণস্বরূপ আমার নিজস্ব কিছু কোড ব্যবহার করব:
getInitialState: function () {
return {
dragPosition: {
top : 0,
left : 0
},
editValue : "",
dragging : false,
editing : false
};
}যে অ্যাপ্লিকেশনটিতে আমি কাজ করছি তার মধ্যে আমি স্থিতি নির্ধারণ করে এবং ব্যবহার করে চলেছি। আমি setStateআপনার উপর বিশ্বাস করি তবে আপনি স্বতন্ত্রভাবে যা চান রাজ্যগুলি সম্পাদনা করতে পারবেন আমি একে এ জাতীয়ভাবে বলেছি:
onChange: function (event) {
event.preventDefault();
event.stopPropagation();
this.setState({editValue: event.target.value});
},মনে রাখবেন React.createClassযে আপনি যে ফাংশনটি বলেছেন তার মধ্যে আপনাকে রাষ্ট্রটি সেট করতে হবেgetInitialState
আমি পরিবর্তন করতে tmp var ব্যবহার করি।
changeTheme(v) {
let tmp = this.state.tableData
tmp.theme = v
this.setState({
tableData : tmp
})
}let original = {a:1}; let tmp = original; tmp.a = 5; // original is now === Object {a: 5} এটি আপনাকে সমস্যা না দিলেও এটি করবেন না।