Еден извор на вистина во React

За сите променливи податоци во React-апликацијата мора да постои еден извор на вистина. Со овие зборови се подразбира дека ако имате две состојби и едната состојба може да се пресмета преку другата - тогаш една од состојбите е излишна и треба да се отстрани.

Ајде да го разгледаме ова на пример. Нека имате, на пример, два полиња за внесување: во првото се внесува температура во степени Фаренхајт, а во второто - во степени Целзиусови. При тоа, сакаме и двете полиња да бидат синхронизирани: при внесување на температура во едно поле, таа соодветно треба да се промени во второто.

Погрешен пристап би бил да се внесат две состојби: една за температурата по Фаренхајт, а втората - по Целзиус. Зошто е погрешно: затоа што едната температура се пресметува од другата, што значи како место за складирање на податоци треба да постои една состојба.

Напишете имплементација на опишаната задача.

Некој програмер напишал код кој ја прикажува сумата на елементите од низата:

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]); // го пишуваме текстот на елементот што се уредува во посебна состојба
	}
	
	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>;
}

Што не е во ред со овој код? Поправете го.