Een Bron van Waarheid in React

Vir enige veranderlike data in 'n React-toepassing moet daar een bron van waarheid wees. Met hierdie woorde word bedoel dat as jy twee toestande het en een toestand bereken kan word deur die ander - dan is een van die toestande oorbodig en dit moet verwyder word.

Kom ons bespreek dit aan die hand van 'n voorbeeld. Gestel jy het, byvoorbeeld, twee invoervelde: in die eerste word temperatuur in grade Fahrenheit ingevoer, en in die tweede - in grade Celsius. Tegelykertijd wil ons hê dat albei invoervelde gesinchroniseer moet wees: wanneer temperatuur in een invoerveld ingevoer word, moet dit ooreenkomstig verander in die tweede.

'n Verkeerde benadering sal wees om twee toestande in te stel: een vir temperatuur in Fahrenheit, en die tweede - in Celsius. Hoekom dit verkeerd is: omdat een temperatuur uit die ander bereken word, en dus moet daar een toestand as data stoorplek wees.

Skryf die implementering van die beskryfde taak.

'n Sekere programmeur het kode geskryf wat die som van die elemente van 'n array vertoon:

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); // som van elemente van array nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // voeg element by array
		setSum(getSum([...nums, event.target.value])); // bereken som oor
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Wat is verkeerd met hierdie kode? Regverdig dit.

'n Sekere programmeur het kode geskryf om elemente van 'n array te redigeer:

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]); // skryf teks van geredigeerde element in aparte toestand
	}
	
	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>;
}

Wat is verkeerd met hierdie kode? Regverdig dit.