Sumber Kebenaran Tunggal dalam React

Untuk sebarang data yang boleh berubah dalam aplikasi React, harus ada satu sumber kebenaran. Maksud perkataan ini adalah, jika anda mempunyai dua keadaan dan satu keadaan boleh dikira melalui keadaan yang lain - ini bermakna satu daripada keadaan tersebut adalah berlebihan dan perlu dibuang.

Mari kita bincangkan ini dengan contoh. Katakan anda, contohnya, mempunyai dua input: suhu dimasukkan ke dalam yang pertama dalam darjah Fahrenheit, dan ke dalam yang kedua - dalam darjah Celsius. Pada masa yang sama, kita mahu, kedua-dua input diselaraskan: apabila suhu dimasukkan ke dalam satu input, ia sepatutnya berubah dengan sewajarnya dalam input kedua.

Pendekatan yang salah adalah dengan memperkenalkan dua keadaan: satu untuk suhu dalam Fahrenheit, dan yang kedua - dalam Celsius. Mengapa tidak betul: kerana satu suhu dikira daripada yang lain, oleh itu, sebagai tempat penyimpanan data harus ada satu keadaan.

Tulis pelaksanaan tugas yang diterangkan.

Seorang pengaturcara menulis kod yang memaparkan jumlah elemen 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); // jumlah elemen array nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // menambah elemen ke dalam array
		setSum(getSum([...nums, event.target.value])); // kira semula jumlah
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Apakah yang tidak kena dengan kod ini? Betulkannya.

Seorang pengaturcara menulis kod untuk mengedit elemen 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]); // tulis teks elemen yang disunting ke dalam keadaan berasingan
	}
	
	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>;
}

Apakah yang tidak kena dengan kod ini? Betulkannya.