Viena patiesības avota princips React

Visiem maināmiem datiem React lietotnē jābūt vienam patiesības avotam. Ar šiem vārdiem tiek domāts, ka, ja jums ir divi stāvokļi un vienu stāvokli var izrēķināt caur otru - tas nozīmē, ka viens no stāvokļiem ir lieks, un tas ir jānoņem.

Apspriedīsim to ar piemēru. Pieņemsim, ka jums, piemēram, ir divi ievades lauki: pirmajā tiek ievadīta temperatūra Fārenheita grādos, bet otrajā - Celsija grādos. Turklāt mēs vēlamies, lai abi ievades lauki būtu sinhronizēti: ievadot temperatūru vienā ievades laukā, tai atbilstoši jāmainās arī otrajā.

Nepareiza pieeja būtu ieviest divus stāvokļus: vienu temperatūrai pēc Fārenheita, bet otru - pēc Celsija. Kāpēc nepareizi: tāpēc ka viena temperatūra tiek aprēķināta no otras, kas nozīmē, ka kā datu glabāšanas vieta jābūt tikai vienam stāvoklim.

Uzrakstiet aprakstītās problēmas realizāciju.

Kāds programmētājs uzrakstīja kodu, kas izvada massīva elementu summu:

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); // massīva nums elementu summa
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // pievienojam elementu massīvam
		setSum(getSum([...nums, event.target.value])); // aprēķinām summu no jauna
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Kas šajā kodā ir nepareizi? Izlabojiet to.

Kāds programmētājs uzrakstīja kodu massīva elementu rediģēšanai:

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]); // ierakstām rediģējamā elementa tekstu atsevišķā stāvoklī
	}
	
	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>;
}

Kas šajā kodā ir nepareizi? Izlabojiet to.