En enkelt kilde til sannhet i React

For alle endrede data i et React-applikasjon skal det være en kilde til sannhet. Med disse ordene menes det at hvis du har to tilstander og en tilstand kan beregnes gjennom den andre - betyr det at en av tilstandene er overflødig og må fjernes.

La oss diskutere dette med et eksempel. Anta at du, for eksempel, har to inndatafelt: i det første skrives temperaturen i grader Fahrenheit, og i det andre - i grader Celsius. Samtidig ønsker vi at begge inndatafeltene skal synkroniseres: når temperaturen skrives inn i ett inndatafelt, skal den tilsvarende måten endres i det andre.

Feil tilnærming vil være å innføre to tilstander: en for temperaturen i Fahrenheit, og den andre - i Celsius. Hvorfor ikke riktig: fordi en temperatur beregnes fra den andre, noe som betyr at som datalagringssted bør det være én tilstand.

Skriv en implementasjon av den beskrevne oppgaven.

En programmerer skrev kode som viser summen av elementene i en 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 av elementene i arrayen nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // legger til et element i arrayen
		setSum(getSum([...nums, event.target.value])); // beregner summen på nytt
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Hva er galt med denne koden? Korriger den.

En programmerer skrev kode for å redigere elementer i en 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 til det redigerte elementet i en egen 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>;
}

Hva er galt med denne koden? Korriger den.