React'ta Tek Gerçek Kaynak

Bir React uygulamasındaki herhangi bir değiştirilebilir veri için bir tek gerçek kaynak olmalıdır. Bu sözlerle kastedilen, eğer iki state'iniz varsa ve bir state diğeri üzerinden hesaplanabiliyorsa - bu, state'lerden birinin gereksiz olduğu ve kaldırılması gerektiği anlamına gelir.

Bunu bir örnekle tartışalım. Diyelim ki, örneğin, iki inputunuz var: birincisine Fahrenheit derece cinsinden sıcaklık giriliyor, ikincisine ise Celsius derece cinsinden. Aynı zamanda biz, her iki inputun senkronize olmasını istiyoruz: sıcaklık bir inputa girildiğinde, buna uygun şekilde diğerinde de değişmelidir.

Yanlış yaklaşım, iki state tanımlamak olacaktır: biri Fahrenheit sıcaklığı için, diğeri ise Celsius için. Neden yanlış: çünkü bir sıcaklık diğerinden hesaplanıyor, bu da veri saklama yeri olarak tek bir state olması gerektiği anlamına gelir.

Açıklanan görevin uygulamasını yazın.

Bir programcı, bir dizinin elemanlarının toplamını gösteren şu kodu yazdı:

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); // dizi elemanlarının toplamı
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // diziye eleman ekliyoruz
		setSum(getSum([...nums, event.target.value])); // toplamı yeniden hesaplıyoruz
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Bu kodda ne yanlış? Düzeltin.

Bir programcı, bir dizi elemanını düzenlemek için şu kodu yazdı:

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]); // düzenlenen elemanın metnini ayrı bir state'e yazıyoruz
	}
	
	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>;
}

Bu kodda ne yanlış? Düzeltin.