Vienas tiesos šaltinis React

Bet kokiems keičiamiems duomenims React programėlėje turi būti vienas tiesos šaltinis. Šiais žodžiais turima omenyje tai, kad jei turite dvi būsenas ir viena būsena gali būti apskaičiuota per kitą - vadinasi, viena iš būsenų yra perteklinė ir ją reikia pašalinti.

Aptarkime tai pavyzdžiu. Tarkime, kad turite, pavyzdžiui, du įvesties laukus: pirmajame įvedama temperatūra Farenheito laipsniais, o antrajame - Celsijaus laipsniais. Tuo pačiu mes norime, kad abu įvesties laukai būtų sinchronizuoti: kai temperatūra įvedama į vieną įvesties lauką, ji atitinkamu būdu turi keistis ir antrajame.

Neteisingas požiūris būtų įvesti dvi būsenas: vieną temperatūrai Farenheito laipsniais, o antrą - Celsijaus laipsniais. Kodėl neteisinga: nes viena temperatūra apskaičiuojama iš kitos, o tai reiškia, kad kaip duomenų laikymo vieta turi būti naudojama viena būsena.

Parašykite aprašytos užduoties implementaciją.

Kažkoks programuotojas parašė kodą, rodantį masyvo elementų sumą:

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); // masyvo nums elementų suma
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // pridedame elementą į masyvą
		setSum(getSum([...nums, event.target.value])); // perskaičiuojame sumą
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Kas negerai su šiuo kodu? Ištaisykite jį.

Kažkoks programuotojas parašė kodą masyvo elementų redagavimui:

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]); // įrašome redaguojamo elemento tekstą į atskirą būseną
	}
	
	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 negerai su šiuo kodu? Ištaisykite jį.