Një Burim i Vetëm i Të Vërtetës në React

Për çdo të dhënë që mund të ndryshojë në një aplikacion React duhet të ketë një burim të vetëm të së vërtetës. Me këto fjalë nënkuptohet se nëse keni dy state dhe një state mund të llogaritet përmes tjetrit - do të thotë një nga state është i tepërt dhe duhet hequr.

Le ta diskutojmë këtë me një shembull. Supozoni se keni, për shembull, dy inpute: në të parin futet temperatura në gradë Fahrenheit, dhe në të dytin - në gradë Celsius. Në të njëjtën kohë ne duam, që të dy inputet të jenë të sinkronizuar: kur futet temperatura në një input ajo duhet të ndryshojë në mënyrë përkatëse në të dytin.

Qasja e gabuar do të ishte të krijoni dy state: një për temperaturën në Fahrenheit dhe një tjetër - për Celsius. Pse është e gabuar: sepse një temperaturë llogaritet nga tjetra, prandaj si vend ruajtjeje i të dhënave duhet të ketë vetëm një state.

Shkruani një zbatim të detyrës së përshkruar.

Një programist i caktuar shkroi kod, i cili shfaq shumën e elementeve të një array:

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); // shuma e elementeve të array nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // shtojmë një element në array
		setSum(getSum([...nums, event.target.value])); // rillogaritim shumën
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Çfarë nuk shkon me këtë kod? Korrigjojeni atë.

Një programist i caktuar shkroi kod për redaktimin e elementeve të një array:

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]); // shkruajmë tekstin e elementit që redaktohet në një state të veçantë
	}
	
	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>;
}

Çfarë nuk shkon me këtë kod? Korrigjojeni atë.