Üks tõeallikas Reactis

Iga muutuvate andmete puhul React-rakenduses peab olema üks tõeallikas. Nende sõnadega peetakse silmas, et kui teil on kaks olekut ja ühe oleku saab arvutada teise kaudu, siis üks olekutest on üleliigne ja see tuleb eemaldada.

Arutleme seda näite abil. Oletame, et teil on kaks sisendvälja: esimesse sisestatakse temperatuur Fahrenheiti kraadides ja teisse - Celsiuse kraadides. Samas soovime, et mõlemad sisendväljad oleks sünkroonitud: temperatuuri sisestamisel ühte sisendvälja peaks see vastavalt muutuma teises.

Vale lähenemine oleks kasutada kahte olekut: üks Fahrenheiti temperatuuri jaoks ning teine - Celsiuse temperatuuri jaoks. Miks on vale: sest üks temperatuur arvutatakse teisest, mis tähendab, et andmete hoidmise kohana peaks olema üks olek.

Kirjutage kirjeldatud ülesande realiseering.

Mingi programmeerija kirjutas koodi, mis kuvab massiivi elementide summat:

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); // massiivi nums elementide summa
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // lisame elemendi massiivi
		setSum(getSum([...nums, event.target.value])); // arvutame summa uuesti
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Mis selle koodiga on valesti? Parandage see.

Mingi programmeerija kirjutas koodi massiivi elementide muutmiseks:

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]); // kirjutame muudetava elemendi teksti eraldi olekusse
	}
	
	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>;
}

Mis selle koodiga on valesti? Parandage see.