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>;
}

এই কোডটির কী সমস্যা? এটি সংশোধন করুন।