Μία Πηγή Αλήθειας στο React

Για οποιαδήποτε μεταβαλλόμενα δεδομένα σε μια εφαρμογή React πρέπει να υπάρχει μία πηγή αλήθειας. Με αυτά τα λόγια εννοείται ότι αν έχετε δύο states και το ένα state μπορεί να υπολογιστεί μέσω του άλλου - τότε το ένα από τα states είναι περιττό και πρέπει να αφαιρεθεί.

Ας το συζητήσουμε με ένα παράδειγμα. Ας υποθέσουμε ότι έχετε, για παράδειγμα, δύο inputs: στο πρώτο εισάγεται η θερμοκρασία σε βαθμούς Fahrenheit, και στο δεύτερο - σε βαθμούς Celsius. Ταυτόχρονα θέλουμε, ώστε και τα δύο inputs να είναι συγχρονισμένα: κατά την εισαγωγή θερμοκρασίας στο ένα input, αυτή αντίστοιχα πρέπει να αλλάζει και στο δεύτερο.

Λανθασμένη προσέγγιση θα ήταν να εισαχθούν δύο states: ένα για τη θερμοκρασία σε Fahrenheit, και το δεύτερο - σε Celsius. Γιατί είναι λάθος: γιατί η μία θερμοκρασία υπολογίζεται από την άλλη, και επομένως ως χώρος αποθήκευσης δεδομένων πρέπει να υπάρχει ένα state.

Γράψτε την υλοποίηση της περιγραφόμενης άσκησης.

Κάποιος προγραμματιστής έγραψε κώδικα που εμφανίζει το άθροισμα των στοιχείων ενός πίνακα:

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]); // γράφουμε κείμενο του στοιχείου που επεξεργαζόμαστε σε ξεχωριστό 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>;
}

Τι είναι λάθος με αυτόν τον κώδικα; Διορθώστε τον.