Eine einzige Quelle der Wahrheit in React

Für alle veränderbaren Daten in einer React-Anwendung muss es eine einzige Quelle der Wahrheit geben. Damit ist gemeint, dass wenn Sie zwei Zustände haben und ein Zustand aus dem anderen berechnet werden kann - dann ist einer der Zustände überflüssig und muss entfernt werden.

Lassen Sie uns dies an einem Beispiel besprechen. Nehmen wir an, Sie haben zwei Eingabefelder: In das erste wird die Temperatur in Grad Fahrenheit eingegeben und in das zweite - in Grad Celsius. Dabei wollen wir, dass beide Eingabefelder synchronisiert sind: Bei der Eingabe der Temperatur in ein Eingabefeld soll sie entsprechend im anderen geändert werden.

Ein falscher Ansatz wäre, zwei Zustände einzuführen: einen für die Temperatur in Fahrenheit und einen zweiten - für Celsius. Warum das nicht richtig ist: weil eine Temperatur aus der anderen berechnet wird, und daher für die Datenspeicherung nur ein Zustand vorhanden sein sollte.

Schreiben Sie eine Implementierung der beschriebenen Aufgabe.

Ein gewisser Programmierer hat Code geschrieben, der die Summe der Elemente eines Arrays anzeigt:

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); // Summe der Elemente des Arrays nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // Element zum Array hinzufügen
		setSum(getSum([...nums, event.target.value])); // Summe neu berechnen
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Was ist an diesem Code falsch? Korrigieren Sie ihn.

Ein gewisser Programmierer hat Code zum Bearbeiten von Array-Elementen geschrieben:

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]); // Text des zu bearbeitenden Elements in einen separaten Zustand schreiben
	}
	
	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>;
}

Was ist an diesem Code falsch? Korrigieren Sie ihn.