Één bron van waarheid in React

Voor alle wijzigbare gegevens in een React-applicatie moet er één bron van waarheid zijn. Met deze woorden wordt bedoeld dat als je twee states hebt en de ene state kan worden berekend via de andere - dan is een van de states overbodig en moet worden verwijderd.

Laten we dit bespreken aan de hand van een voorbeeld. Stel dat je, bijvoorbeeld, twee invoervelden hebt: in het eerste wordt de temperatuur in graden Fahrenheit ingevoerd, en in het tweede - in graden Celsius. Tegelijkertijd willen we dat beide invoervelden gesynchroniseerd zijn: bij het invoeren van de temperatuur in het ene veld moet deze op de corresponderende manier veranderen in het tweede.

Een verkeerde aanpak zou zijn om twee states in te stellen: één voor de temperatuur in Fahrenheit, en de tweede - in Celsius. Waarom is dit niet correct: omdat de ene temperatuur uit de andere wordt berekend, wat betekent dat er voor de gegevensopslag één state moet zijn.

Schrijf een implementatie van de beschreven taak.

Een programmeur heeft code geschreven die de som van de elementen van een array weergeeft:

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); // som van de elementen van de array nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // voegen een element toe aan de array
		setSum(getSum([...nums, event.target.value])); // berekenen de som opnieuw
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Wat is er mis met deze code? Verbeter het.

Een programmeur heeft code geschreven voor het bewerken van elementen in een 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]); // schrijven de tekst van het te bewerken element in een aparte state
	}
	
	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>;
}

Wat is er mis met deze code? Verbeter het.