Một Nguồn Chân Lý Trong React

Đối với bất kỳ dữ liệu nào có thể thay đổi trong ứng dụng React, phải có một nguồn chân lý. Điều này có nghĩa là nếu bạn có hai trạng thái và một trạng thái có thể được tính toán thông qua trạng thái kia - thì một trong các trạng thái là thừa và cần phải loại bỏ.

Hãy thảo luận điều này bằng một ví dụ. Giả sử bạn có hai trường nhập liệu: trường thứ nhất nhập nhiệt độ theo độ Fahrenheit, và trường thứ hai - theo độ Celsius. Đồng thời, chúng ta muốn cả hai trường nhập liệu được đồng bộ: khi nhập nhiệt độ vào một trường, nó sẽ thay đổi tương ứng trong trường kia.

Cách tiếp cận sai sẽ là tạo hai trạng thái: một cho nhiệt độ Fahrenheit, và trạng thái thứ hai - cho Celsius. Tại sao lại sai: bởi vì một nhiệt độ được tính từ nhiệt độ kia, có nghĩa là nơi lưu trữ dữ liệu chỉ nên là một trạng thái.

Hãy viết phần triển khai cho nhiệm vụ được mô tả.

Một lập trình viên nào đó đã viết mã để hiển thị tổng các phần tử của mảng:

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); // tổng các phần tử mảng nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // thêm phần tử vào mảng
		setSum(getSum([...nums, event.target.value])); // tính lại tổng
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Có gì không đúng với mã này? Hãy sửa nó.

Một lập trình viên nào đó đã viết mã để chỉnh sửa các phần tử của mảng:

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]); // ghi văn bản của phần tử đang chỉnh sửa vào một trạng thái riêng
	}
	
	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>;
}

Có gì không đúng với mã này? Hãy sửa nó.