En enda saningskälla i React

För alla föränderliga data i ett React-program ska det finnas en saningskälla. Med detta menas att om du har två tillstånd och ett tillstånd kan beräknas via det andra - betyder det att ett av tillstånden är överflödigt och bör tas bort.

Låt oss diskutera detta med ett exempel. Anta att du, till exempel, har två inmatningsfält: i det första matas temperaturen in i Fahrenheit, och i det andra - i Celsius. Samtidigt vill vi att båda inmatningsfälten ska vara synkroniserade: när temperaturen matas in i ett fält ska den på motsvarande sätt ändras i det andra.

Ett felaktigt tillvägagångssätt skulle vara att införa två tillstånd: ett för temperaturen i Fahrenheit, och det andra - i Celsius. Varför det är fel: eftersom en temperatur beräknas från den andra, betyder det att som datalagringsplats bör det finnas ett tillstånd.

Skriv en implementation av den beskrivna uppgiften.

En programmerare skrev kod som visar summan av element 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); // summan av elementen i arrayen nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // lägger till ett element i arrayen
		setSum(getSum([...nums, event.target.value])); // beräknar summan på nytt
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Vad är fel med den här koden? Råtta den.

En programmerare skrev kod för att redigera element 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 texten för det redigerade elementet till ett separat tillstånd
	}
	
	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>;
}

Vad är fel med den här koden? Råtta den.