React တွင် အချက်အလက်၏ တစ်ခုတည်းသော အရင်းအမြစ်

React အက်ပ်တစ်ခုရှိ ပြောင်းလဲနိုင်သော အချက်အလက်အားလုံးအတွက် အချက်အလက်၏ တစ်ခုတည်းသော အရင်းအမြစ် တစ်ခု ရှိရမည်။ ဤစကားလုံးများ၏ အဓိပ္ပါယ်မှာ သင့်တွင် state နှစ်ခုရှိပြီး ၎င်းတို့ထဲမှ တစ်ခုကို အခြားတစ်ခုမှ တွက်ချက်နိုင်လျှင် ၎င်းဆိုလိုသည်မှာ state တစ်ခုသည် ပိုလျှံနေပြီး ၎င်းကို ဖယ်ရှားရမည်ဟု ဆိုလိုသည်။

ဥပမာတစ်ခုဖြင့် ဆွေးနွေးကြပါစို့။ သင့်တွင် ဥပမာအားဖြင့်၊ input နှစ်ခုရှိသည်ဟု ဆိုကြပါစို့။ ပထမတစ်ခုတွင် ဖာရင်ဟိုက်ဒီဂရီဖြင့် အပူချိန်ကို ရိုက်ထည့်ပြီး၊ ဒုတိယတစ်ခုတွင် - ဆဲစီယပ်ဒီဂရီဖြင့် ရိုက်ထည့်သည်။ ဤအချိန်တွင် ကျွန်ုပ်တို့လိုချင်သည်မှာ input နှစ်ခုလုံး ချိတ်ဆက်အလုပ်လုပ်စေရန် ဖြစ်သည်။ input တစ်ခုတွင် အပူချိန်ရိုက်ထည့်သည့်အခါ ၎င်းသည် သင့်လျော်စွာ ပြောင်းလဲသင့်ပြီး၊ ဒုတိယ input တွင်လည်း ပြောင်းလဲသင့်သည်။

မှားယွင်းသောချဉ်းကပ်နည်းမှာ state နှစ်ခုကို သတ်မှတ်ရန် ဖြစ်သည်။ တစ်ခုသည် ဖာရင်ဟိုက်အပူချိန်အတွက်၊ ဒုတိယတစ်ခုမှာ - ဆဲစီယပ်အတွက် ဖြစ်သည်။ မှားသည်မှာ အဘယ်ကြောင့်နည်း။ အဘယ်ကြောင့်ဆိုသော် အပူချိန်တစ်ခုကို အခြားတစ်ခုမှ တွက်ချက်နိုင်သောကြောင့်၊ ထို့ကြောင့် အချက်အလက်သိုလှောင်ရာနေရာအဖြစ် state တစ်ခုတည်းသာ ရှိသင့်သည်။

ဖော်ပြပါ တာဝန်ကို အကောင်အထည်ဖော်သည့် ကုဒ်ရေးပါ။

ပရိုဂရမ်မာတစ်ယောက်သည် 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); // array nums ၏ အစုစုပေါင်း
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // array ထဲသို့ အစိတ်အပိုင်းတစ်ခု ပေါင်းထည့်သည်
		setSum(getSum([...nums, event.target.value])); // ပေါင်းလဒ်ကို ပြန်လည်တွက်ချက်သည်
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

ဤကုဒ်တွင် ဘာမှားနေသနည်း။ ၎င်းကို ပြင်ဆင်ပါ။

ပရိုဂရမ်မာတစ်ယောက်သည် 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]); // တည်းဖြတ်နေသော အစိတ်အပိုင်း၏ စာသားကို သီးသန့် state တစ်ခုတွင် ရေးသည်
	}
	
	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>;
}

ဤကုဒ်တွင် ဘာမှားနေသနည်း။ ၎င်းကို ပြင်ဆင်ပါ။