React में सिंगल सोर्स ऑफ ट्रूथ

React एप्लिकेशन में किसी भी परिवर्तनशील डेटा के लिए एक स्रोत सत्य (सिंगल सोर्स ऑफ ट्रूथ) होना चाहिए। इसका मतलब यह है कि यदि आपके पास दो स्टेट हैं और एक स्टेट दूसरे के माध्यम से गणना की जा सकती है - तो इसका मतलब है कि एक स्टेट अनावश्यक है और इसे हटा देना चाहिए।

आइए इसे एक उदाहरण से समझते हैं। मान लीजिए आपके पास, उदाहरण के लिए, दो इनपुट हैं: पहले में तापमान फारेनहाइट में दर्ज किया जाता है, और दूसरे में - सेल्सियस में। साथ ही, हम चाहते हैं कि दोनों इनपुट सिंक्रोनाइज़्ड रहें: एक इनपुट में तापमान दर्ज करने पर दूसरे में भी तदनुरूप बदलाव होना चाहिए।

गलत तरीका होगा दो स्टेट बनाना: एक फारेनहाइट तापमान के लिए, और दूसरा - सेल्सियस के लिए। यह गलत क्यों है: क्योंकि एक तापमान दूसरे से गणना योग्य है, इसलिए डेटा संग्रहीत करने के लिए एक ही स्टेट होना चाहिए।

वर्णित कार्य का कार्यान्वयन लिखें।

एक प्रोग्रामर ने सरणी के तत्वों का योग दर्शाने वाला कोड लिखा:

function getSum(arr) {
	let res = 0;
	
	for (let elem of arr) {
		res += +elem;
	}
	
	return res;
}

function Calculator() {
	const [value, setValue] = useState('');
	const [nums, setNums] = useState([1, 2, 3]);
	const [sum, setSum] = useState(6); // सरणी nums के तत्वों का योग
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // सरणी में एक तत्व जोड़ें
		setSum(getSum([...nums, event.target.value])); // योग फिर से गणना करें
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

इस कोड में क्या गलत है? इसे सही करें।

एक प्रोग्रामर ने सरणी के तत्वों को संपादित करने के लिए कोड लिखा:

function App() {
	const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
	const [editNum, setEditNum] = useState(null);
	const [value, setValue] = useState('');
	
	const result = notes.map((note, index) => {
		return <p key={index} onClick={() => startEdit(index)}>
			{note}
		</p>;
	});
	
	function startEdit(index) {
		setEditNum(index);
		setValue(notes[index]); // संपादित किए जाने वाले तत्व का टेक्स्ट एक अलग स्टेट में लिखें
	}
	
	function changeItem(event) {
		setValue(event.target.value);
		setNotes([...notes.slice(0, editNum), event.target.value,...notes.slice(editNum + 1)]);
	}
	
	return <div>
		{result}
		<input value={value} onChange={changeItem} />
	</div>;
}

इस कोड में क्या गलत है? इसे सही करें।