React හි සත්‍යයේ එක මූලාශ්‍රයක්

React යෙදුමක ඕනෑම වෙනස් කළ හැකි දත්ත සඳහා සත්‍යයේ එක මූලාශ්‍රයක් තිබිය යුතුය. මෙම වචන වලින් අදහස් වන්නේ, ඔබට state දෙකක් තිබෙන අතර එක් state එකක් අනෙක හරහා ගණනය කළ හැකි නම් - එයින් අදහස් වන්නේ එක් state එකක් අනවශ්‍ය වන අතර එය ඉවත් කළ යුතු බවයි.

අපි එය උදාහරණයක් මගින් සාකච්ඡා කරමු. ඔබට, උදාහරණයක් ලෙස, input ක්ෂේත්‍ර දෙකක් ඇතැයි සිතමු: පළමු එකට ඇතුල් කරනු ලබන්නේ ෆැරන්හයිට් අංශක වලින් උෂ්ණත්වය වන අතර, දෙවන එකට - සෙල්සියස් අංශක වලින්. ඒ සමඟම අපට අවශ්‍ය වන්නේ, input දෙකම සමමුහුර්ත වීමයි: එක් input එකකට උෂ්ණත්වය ඇතුල් කරන විට එය අනුරූප ආකාරයෙන් දෙවැන්නෙහි වෙනස් විය යුතුය.

වැරදි ප්‍රවේශය වනුයේ state දෙකක් හඳුන්වා දීමයි: එකක් ෆැරන්හයිට් උෂ්ණත්වය සඳහා, දෙවැන්න - සෙල්සියස් සඳහා. ඇයි වැරදි ද කියතොත්: එක් උෂ්ණත්වයක් අනෙක් එකෙන් ගණනය කෙරෙන බැවින්, දත්ත ගබඩා කිරීමේ ස්ථානය ලෙස state එකක් පමණක් තිබිය යුතුය.

විස්තර කර ඇති කාර්යය ක්‍රියාත්මක කිරීම ලියන්න.

යම් ක්‍රමලේඛකයෙක් අරාවේ මූලද්‍රව්‍යවල එකතුව පෙන්වන කේතය ලියා ඇත:

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]); // සංස්කරණය කරන මූලද්‍රව්‍යයේ පෙළ වෙනම state එකකට ලියමු
	}
	
	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>;
}

මෙම කේතයේ ඇති දෝෂය කුමක්ද? එය නිවරදි කරන්න.