En enkelt sandhedskilde i React

For enhver ændring af data i en React-applikation skal der være en sandhedskilde. Med dette menes, at hvis du har to tilstande, og den ene tilstand kan beregnes ud fra den anden, betyder det, at en af tilstandene er overflødig og bør fjernes.

Lad os diskutere dette med et eksempel. Forestil dig, at du for eksempel har to inputfelter: i det første indtastes temperaturen i Fahrenheit, og i det andet - i Celsius. Samtidig ønsker vi, at begge inputfelter skal være synkroniserede: når temperaturen indtastes i det ene inputfelt, skal den tilsvarende ændres i det andet.

En forkert tilgang ville være at indføre to tilstande: en for temperaturen i Fahrenheit, og den anden - for Celsius. Hvorfor er det forkert: fordi den ene temperatur beregnes ud fra den anden, hvilket betyder, at der kun bør være én tilstand som datalager.

Skriv en implementering af den beskrevne opgave.

En programmør skrev kode, der viser summen af elementer i et array:

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); // summen af elementer i arrayet nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // tilføjer et element til arrayet
		setSum(getSum([...nums, event.target.value])); // genberegner summen
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Hvad er der galt med denne kode? Ret den.

En programmør skrev kode til at redigere elementer i et 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]); // skriver teksten fra det redigerede element i en separat tilstand
	}
	
	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>;
}

Hvad er der galt med denne kode? Ret den.