Chanzo Kimoja cha Ukweli katika React

Kwa data yoyote inayobadilika katika programu ya React lazima kuwe na chanzo kimoja cha ukweli. Maana ya maneno haya ni kwamba ikiwa una hali mbili na hali moja inaweza kuhesabiwa kupitia hali nyingine - hivyo hali moja ni ya ziada na inahitaji kuondolewa.

Wacha tujadili hili kwa kutumia mfano. Wacha tuseme, kwa mfano, una maingizo mawili: kwenye ya kwanza huandikwa joto kwa digrii za Fahrenheit, na kwenye ya pili - kwa digrii za Celsius. Wakati huo huo, tunataka maingizo yote mawili yawe synchronized: wakati wa kuandika joto kwenye kuingiza kimoja, inapaswa kubadilika kwa njia inayofaa kwenye ya pili.

Njia isiyo sahihi itakuwa kuanzisha hali mbili: moja kwa joto kwa Fahrenheit, na ya pili - kwa Celsius. Kwa nini sio sahihi: kwa sababu joto moja linahesabiwa kutoka kwa lingine, na kwa hivyo kama sehemu ya kuhifadhi data inapaswa kuwa na hali moja.

Andika utekelezaji wa kazi iliyoelezewa.

Programmer fulani aliandika msimbo, unaoonyesha jumla ya vipengele vya safu:

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); // jumla ya vipengele vya safu nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // tunaongeza kipengele kwenye safu
		setSum(getSum([...nums, event.target.value])); // tunahesabu jumla upya
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Nini kibaya na msimbo huu? Irekebishe.

Programmer fulani aliandika msimbo wa kuhariri vipengele vya safu:

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]); // tunaandika maandishi ya kipengele kinachohaririwa kwenye hali tofauti
	}
	
	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>;
}

Nini kibaya na msimbo huu? Irekebishe.